作为反应组件加载svg dinamically

我的应用程序应根据路线呈现大约30000个svg元素。如果路线类似www.myapp.com/svg-data/person，它应该呈现person.svg。作为反应组件加载svg dinamically

稍后（相同的路径），可以修改此svg：添加背景颜色，一些文本或某些预定义的图层。我想我应该加载svg作为反应组件。我正在看图书馆https://github.com/boopathi/react-svg-loader，但我不认为它真的适合我的目的。

我的最后一个问题是关于获取SVG数据作为串并使其返回除其他事物的SVG一个组件内...

我应该建立一个通用组件，呈现自带作为参数任何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) 
    } 
    }

这部分将呈现类似：

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> 
    ) 

}

根据道具应该添加文本，或者在需要的任何其他东西。我想念什么？这是做这件事的好方法吗？

来源

2017-07-06 user2670996

我建议你，一两件事情：

在单一组件创建每个SVG，这将帮助您找出您的SVG的行为，样式，道具等等
使用higher order component创建通用组件，并把它作为一个代理，以动态的道具传递给你的SVG组件，如果需要
关于路由器添加常用的SVG的行为，你可以有一个映射路由器 - 图标或直接设置SVG组件作为路由器组件呈现

的SvgRendering的主要目的是与所述给定的道具来充当高阶分量和呈现给定的组件。

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（SVG的）目的设置自定义样式，文本，形状等

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/

让我知道如果你有任何问题。

来源

2017-07-07 00:36:51 JoseAPL

我正在使用webpack。只是不知道如何将30000个svg组件集成到我的js代码中！ – user2670996

作为反应组件加载svg dinamically

回答

相关问题