Question

我有一个对话框组件，页眉，页脚和正文作为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>
)
}

这是传递带名字（密钥）的孩子的最好方法吗？

我是否滥用了＆＃39;键？

Answer 1

Key应该是React中的reserved keyword。如果您想要使用元素中的id，请将其作为id而不是key传递给我而且对于我来说似乎没有用，因为您正在尝试为每个元素找到相关的子元素。儿童钥匙。你只需写

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

Answer 2

如果你想将自定义道具传递给儿童，具体取决于道具：

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}

呈现它们

使用props.children在React中转换

2 个答案: