代码之家  ›  专栏  ›  技术社区  ›  Ian Warburton

在JSX中将props赋给组件变量

  •  1
  • Ian Warburton  · 技术社区  · 5 年前

    给定此呈现函数,如何将属性分配给顶级子级…

    render() {
       return (
          <div>
             {this.props.children}
          </div>
    );
    
    1 回复  |  直到 5 年前
        1
  •  0
  •   dance2die    5 年前

    React提供了一种映射子组件的方法,使用 React.Children.map ,可用于对每个子级和 clone 把道具传下去。

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

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

    Edit so.answer.54334021

    demo

    如果你需要把道具传给多个级别,那么我真的会推荐你 Context API 向子女/孙子/孙子等公开顶级值。