javascript - 如何抽象出一行因项目而异的代码？

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