反応コンポーネントとしてsvgをdinamicallyロードする

Question

ルートに応じて、約30000 svg要素をレンダリングする必要があります。 ルートがwww.myapp.com/svg-data/personに似ている場合は、person.svgをレンダリングする必要があります。

後で同じルートで、このsvgを変更することができます：背景色、テキスト、またはあらかじめ定義されたレイヤーを追加します。 私は反応成分としてsvgをロードすべきだと思います。私はライブラリhttps://github.com/boopathi/react-svg-loaderを見ていますが、私はそれが本当に私の目的に合っているとは思わない。

私の最後の思考は、私は、パラメータとして来るものは何でもSVGをレンダリングする汎用コンポーネントを構築すべき文字列としてSVGデータを取得し、他のものの間でSVGを返すコンポーネント内にレンダリング...

についてです：小道具に応じて、それはテキスト、またはオンデマンドで他のものを追加する必要があります

render() { 
    const {svgData, textForSVGData} = this.props 
    let svgText=null 

    if (textForSVGData) { 
    svgText= <text x='250' y='150' font-size='55'> {textForSVGData} </text> 
    } 

    return (
     <svg> 
     {this.props.svgData} 
     {svgText} 
     </svg> 
    ) 

} 

：

componentDidMount() { 
    if (this.props.params.searchText) { 
     this.props.requestSVG(this.props.params.searchText) 
    } 
    } 

    componentWillReceiveProps(nextProps) { 
    if (this.props.params.searchText !== nextProps.params.searchText) { 
     this.props.requestSVG(nextProps.params.searchText) 
    } 
    } 

のようなものをレンダリングするでしょう。このコンポーネント。私は何かが恋しいですか？これはそれを行う良い方法ですか？

Answer 1

私は、物事のカップルをことをお勧めします：

• が、これはあなたのSVGの行動を隔離するのに役立ちます、単一コンポーネントで各SVGを作成したスタイル、小道具など

• 使用にhigher order component汎用コンポーネントを作成し、それをプロキシとして使用して、SVGコンポーネントにダイナミックスの小道具を渡し、必要に応じて共通のSVG動作を追加します。

• ルータについては、直接SvgRenderingの主な目的は、より高次の成分として作用し、所定の小道具との所与の構成要素をレンダリングすることである

をレンダリングするルータコンポーネントとしてSVGコンポーネントを設定します。 （SVG）一方

class SvgRenderer extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { invert: true }; 
    this.toggle = this.toggle.bind(this); 
    } 

    toggle() { 
    this.setState({ inverted: !this.state.inverted }); 
    } 

    render() { 
    const { Svg, svgProps } = this.props; 
    const { inverted } = this.state; 

    return (
     <div> 
     <button onClick={this.toggle}>toggle inverted svg</button> 
     <div><Svg {...svgProps} inverted={inverted}/></div> 
     </div> 
    ); 
    } 
} 

PlayIconは、カスタムスタイル、テキスト、図形などを設定することを目指し

私はこの提案で、私が作成したこれらの勧告の結果ととして非常に一般的なものだ

const PlayIcon = (props) => { 
    const { className, inverted } = props; 
    const classes = className ? ['icon', 'logo', 'className'] : ['icon', 'logo']; 

    if (inverted) classes.push('inverted'); 

    return (
    <div className={classes.join(' ')}> 
     <svg 
     version="1.1" 
     viewBox="0 0 512 512"> 
     <path d="M256.000,512.000 C114.615,512.000 0.000,397.385 0.000,256.000 C0.000,114.615 114.615,0.000 256.000,0.000 C397.385,0.000 512.000,114.615 512.000,256.000 C512.000,397.385 397.385,512.000 256.000,512.000 ZM151.172,128.000 L151.172,384.000 L406.907,256.000 L151.172,128.000 Z" /> 
     </svg> 
    </div> 
); 
}; 

このフィドルでの実装の例：

https://jsfiddle.net/69z2wepo/82451/

は、何か質問があるなら、私に教えてください。