将道具分配给JSX中的组件变量

Question

鉴于此渲染功能，如何将属性分配给顶级子级...

render() {
   return (
      <div>
         {this.props.children}
      </div>
);

Answer 1

React提供了一种使用React.Children.map映射子组件的方法，您可以使用它遍历每个子组件，并使用clone向下传递道具。

const Container = ({ children, ...props }) => (
  <div>
    {React.Children.map(children, child => React.cloneElement(child, props))}
  </div>
);

下面是使用上面的代码的演示。

如果您需要将道具传递到多个级别，那么我实际上建议Context API将顶级值公开给孩子/孙子/孙子等。