使用 props.children 在 React 中嵌入答案

【问题标题】：Transclude in React using props.children使用 props.children 在 React 中嵌入
【发布时间】：2018-07-15 01:07:10
【问题描述】：

我有一个对话框组件，页眉、页脚和正文作为props.children 传递给它

我的代码看起来像。

<Dialog>
<p key='header'>Header</p>
<p key='body'>body</p>
<p key='footer'><Footer</p>
</Dialog>

在 Dialog.js 中

render() {
return(
<div className='modal'>
{this.props.children.find(obj => obj.key==='header')}
{this.props.children.find(obj => obj.key==='body')}
{this.props.children.find(obj => obj.key==='footer')}
</div>
)
}

这是通过名称（键）传递孩子的最佳方式吗？

我是不是误用了“钥匙”？

【问题讨论】：

标签： reactjs transclusion react-props

【解决方案1】：

如果你想根据他们的道具将自定义道具传递给孩子：

render() {
   return(
      <div className='modal'>
         {React.Children.map(this.props.children, child => {
            switch (child.key) {
               case: 'header':
                  return React.cloneElement(child, {
                     className: 'customClass' 
                  });
           ... // do every case in switch
         })}
      </div>
    )
}

您可以这样做以将密钥传递给 className ：

return (
      <div>
        {React.Children.map(this.props.children, child => {
          return React.cloneElement(child, {
            className: child.key
          });
        })}
      </div>
    );

如果可能，您应该在代码中声明这些子代时直接处理此问题，以获得更好的性能：

<Dialog>
    <p key='header' className='dialog-header' >Header</p>
    <p key='body' className='dialog-body'>body</p>
    <p key='footer' className='dialog-footer'><Footer</p>
</Dialog>

用{this.props.children}简单地渲染它们

【讨论】：

【解决方案2】：

Key 在 React 中应该是 reserved keyword。如果您希望使用元素中的 id，请将其传递为 id 而不是 key 此外，您试图为每个子键找到相关的子键对我来说似乎毫无用处。你可以简单地写

render() {
   return(
      <div className='modal'>
         {this.props.children}
      </div>
    )
}

【讨论】：

我可能需要为不同的孩子提供不同的样式或类名。
大多数情况下，您会直接从定义它们的父级传递这些样式、道具或类名
好吧，在这种情况下，您可能只是在扼杀我拥有包装器的目的。我可以将{this.props.children.find(obj => obj.key==='footer')} 包装在一个 div 中，并在 react 组件中保留一些类名 biz 逻辑。
@SreeraghAR 你最终会降低性能，因为随着应用程序的增长，使用 .find 进行不必要的计算。最简单也是最好的方法是在 parent 中实际设置它们的样式