javascript - 渲染一个 React 子组件加上额外的属性？

Question

我试图创建的最终结果是一组 UI/UX 设计师可以像标准 HTML 表格标签一样使用的 React 组件，带有嵌套的自定义组件:

<Widget>
  <WidgetHeader>The Title</WidgetTitle>
  <WidgetBody>{this.props.greeting} World!</WidgetBody>
</Widget>

使用 React“Children”引用，父级有可能 Widget渲染这些子组件，但我遇到的问题是想在渲染子组件时为它们设置额外的 Prop (例如，在 WidgetHeader 上设置点击处理程序或设置 CSS 类，或传递 Prop ，以便子组件知道构建它们的上下文并且可以填充值，如示例中的 greeting)。我可以通过以下方式确定哪个 child 是“标题” child :

class Widget extends React.Component {
  render() {
    let headerChild;
    React.Children.forEach(this.props.children, child => {
      if (child.type.name == 'WidgetHeader') {
        headerChild = child;
      }
    });
    return (
      <div className="widget-container">
        {headerChild}
      </div>
    );
  }
}

但是通过使用 {headerChild}语法，我不能向它传递额外的属性(例如 <{headerChild} className="widget-header" /> 是无效的语法)。

我能弄清楚如何做到这一点的唯一方法是在 Widget 中围绕它有一个虚拟的“包装器”DOM 节点。组件:

return (
  <div className="widget-container">
    <div className="widget-header">
      {headerChild}
    </div>
  </div>
);

但这会使 DOM 变得杂乱无章，并且不会让子级与它所属的父级有任何联系。我可以得到 Widget组件创建 WidgetHeader组件:

return (
  <div className="widget-container">
    <WidgetHeader className="widget-header" {...this.props}>
      {headerChild}
    </div>
  </div>
);

这为子级提供了很好的联系，让他们知道它与哪个父级相关联，但属性仍然不会向下传递。然后这让 UI/UX 设计人员更加尴尬，因为必须有一些其他方法来标记哪个子元素是 Header(或将其作为属性而不是子元素传递):

<Widget
  header={<span><strong>The</strong> Title</span>}
  body={[<p>This is the</p><p>body.</p>]}
/>

那么，还有其他方法可以呈现保存在变量中并传递额外属性的组件实例吗？

Answer 1

要传递额外的 Prop ，你可以使用React.cloneElement .

---

例如，代替

if (child.type.name == 'WidgetHeader') {
  headerChild = child;
}

你可以写

const additionalProps = { foo: () => console.log('bar'); };

if (child.type.name == 'WidgetHeader') {
  headerChild = React.cloneElement(child, additionalProps));
}