Question

我在下面创建了一个菜单项，以使所有菜单项基本相同，只是一行不同，而该行就是这样以html形式保存SVG文件的行：

// many of these
<span className="holder" onClick = {this.clickHandler.bind(this, 'Chat')}>
  // -> this line here -> <svg className='svg' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
  <p className='p11'>Chat</p>
</span>

一些新的React元素（菜单项）

// create MenuItem with this render() function
render(){

    <span className="holder" onClick = {this.clickHandler.bind(this, 'Chat')}>
      // Put SVG element here using props or similar
      <p className='p11'>Chat</p>
    </span>

}

是否可以在Props中传递SVG字符串，这样我就可以执行以下操作：

<MenuItem svg=svg_string>

我本质上想将html元素传递到React元素中...

Answer 1

我可能不会将svg作为字符串传递，而是在其他地方将其包含在MenuItem组件中的情况下

包含菜单项时：

render() {
    return (
        <MenuItem>
          <svg className='svg' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
        </MenuItem>
     );
}

要执行此操作，请在您的MenuItem中将this.props.children包含在呈现器中：

render() {
    return (
        <span className="holder" onClick = {this.clickHandler.bind(this, 'Chat')}>
          {this.props.children}
          <p className='p11'>Chat</p>
        </span>
    );
}

Answer 2

您是否通过代码以编程方式生成SVG路径？如果是这样，则可以将该逻辑放入MenuItem组件中。

如果不是这样（svg路径是静态的），我会将SVG保存到文件中，然后将文件引用传递到props中。

我需要更多信息来回答您的问题。

如何提取出因项目而异的代码行？

2 个答案: