Reactjs 使用道具转移反应中的注意力

我有一个对话框组件，页眉、页脚和正文作为

props.children

我的代码看起来像

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

头
主体
obj.key=='header'）}
{this.props.children.find（obj=>obj.key==='body'）}
{this.props.children.find（obj=>obj.key==='footer'）}
)
}

这是传递名为（key）的孩子的最佳方式吗

---

我是否误用了“key”？

key

应该是React中的

保留关键字。如果您希望使用元素中的id，请将其作为
id
传递，而不是
key
传递。此外，您试图为每个子键查找相关的子项，这对我来说似乎是毫无用处的。你只需要写

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

render（）{
返回(
{this.props.children}
)
}
键
应该是React中的
保留关键字
。如果您希望使用元素中的id，请将其作为
id
传递，而不是
key
传递。此外，您试图为每个子键查找相关的子项，这对我来说似乎是毫无用处的。你只需要写

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

render（）{
返回(
{this.props.children}
)
}
如果要根据儿童道具将自定义道具传递给儿童：

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

render（）{
返回(
{React.Children.map（this.props.Children，child=>{
开关（儿童钥匙）{
大小写：“标题”：
返回React.cloneElement（子级{
类名：“customClass”
});
…//在开关中执行每种情况
})}
)
}

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

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

返回(
{React.Children.map（this.props.Children，child=>{
返回React.cloneElement（子级{
类名：child.key
});
})}
);

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

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


头
正文
如果要根据自定义道具将其传递给子级：
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>
    )
}

render（）{
返回(
{React.Children.map（this.props.Children，child=>{
开关（儿童钥匙）{
大小写：“标题”：
返回React.cloneElement（子级{
类名：“customClass”
});
…//在开关中执行每种情况
})}
)
}

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

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

返回(
{React.Children.map（this.props.Children，child=>{
返回React.cloneElement（子级{
类名：child.key
});
})}
);

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

<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.find]（obj=>obj.key==='footer'）}
在一个div中，并在react组件中保留一些类名业务逻辑。@SreeraghAR由于不必要的计算，最终会降低性能。随着应用程序的增长查找。最简单和最好的方法是在parentI中实际设置它们的样式。我可能需要为不同的子级指定不同的样式或类名。大多数情况下，您需要这是直接从父级定义的样式、道具或类名。在这种情况下，您可能会扼杀我拥有包装器的目的。我可能会包装
{this.props.children.find（obj=>obj.key==='footer'）}
在一个div中，并在react组件中保留一些类名业务逻辑。@SreeraghAR由于不必要的计算，最终会降低性能。随着应用程序的增长查找。最简单和最好的方法是在父级中实际设置它们的样式