インポートされたサードパーティの反応コンポーネントのtagNameを変更するにはどうすればよいですか？

Question

を使用してSVGをインポートし、反応コンポーネントとして使用しています。問題は、これらのSVGを別のSVGに埋め込む必要があることです。ルートタグsvgをsymbolに変換したいと思います。 SVGをそのままインポートすると、SVGタグのネストされた結果が得られます。技術的にはうまくいくが、私のターゲット実装（phantomjs）のための多くの癖がないわけではない。ここではいくつかの架空の使用量はこれが何をレンダリングする

ある

import Flag from 'images/icons/flag.svg' 

export default() => { 
    return (
    <svg> 
     <Flag/> 
     <text>Foo</text> 
    </svg> 
    ) 
} 

だ私はむしろuse xlink:hrefを使用したいが、私は、タグ名のシンボルに

を持っているサードパーティ製のlibによって生成されたルート要素を変換する必要があるだろう私が行うことができるようにしたいのですがどのような

<svg> 
    <svg> 
     <!-- contents of svg --> 
    </svg> 
    <text>Foo</text> 
</svg> 

は、それは三菱UFJ証券

import Flag from 'images/icons/flag.svg' 

export default() => { 
    return (
    <svg> 
     <defs> 
      <Flag as="symbol" id="flag"/> 
     </defs> 
     <use xlinkHref="#flag"/> 
     <text>Foo</text> 
    </svg> 
    ) 
} 

ですサードパーティのライブラリのルート要素のtagNameを変更する必要があるのは本当に一般的なケースです。何もない場合は、セマンティックエレメント名を使用して、ariaタグを追加するだけです。

リアクションコンポーネントのtagNameを変更するにはどうすればよいですか？

Answer 1

高次コンポーネントを使用して、第三者libからのReactDOMElementを傍受しました。レンダリングする前に要素のtypeを切り替えました。大いにインスパイアされたhttps://github.com/pwmckenna/react-transform-style/blob/master/src/index.js

const TransformTag = (Component, tagName) => { 
    const ModifiedComponent = Component 
    const isFn = (typeof(Component) === 'function') 
    const render = isFn ? ModifiedComponent : ModifiedComponent.render 
    const modifiedRender = function() { 
    const { 
     props, 
     ...renderedRest 
    } = render.apply(this, arguments) 

    renderedRest.type = tagName // this is the magic 
    return { 
     props, 
     ...renderedRest 
    } 
    } 
    if (isFn) { 
    return modifiedRender 
    } else { 
    ModifiedComponent.prototype.render = modifiedRender 
    return ModifiedComponent 
    } 
} 

// usage 

export default SvgQuote =() => { 
    return (
     <svg> 
     <defs> 
      { TransformTag(Bill, 'symbol') } 
     </defs> 
     </svg> 
    ) 
}