Javascript 使用this.props.children进行反应-传递状态

因此，我正在尝试将一些道具从我的顶级组件传递到子组件，我在网上进行了一些搜索，但找不到任何显示我如何通过此道具的内容。props.children带有我的组件状态的一些值。这是我的密码

布局（父级）：

export default class Layout extends React.Component {
    constructor (props) {
    super(props)
    this.state = { data: 'test' }
  }

    render() {
        const {location} = this.props;
        console.log("layout");
        return (
            <div>
                <Nav location={location}/>
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">

                            {this.props.children}, data={this.state.data}

                        </div>
                    </div>
                    <Footer/>
                </div>
            </div>

        );
    }
}

//ON COMPONENT RENDER
    componentDidMount = () => {
        console.log("home");
        console.log(this.props.data);
    }

在我的控制台中返回：

export default class Layout extends React.Component {
    constructor (props) {
    super(props)
    this.state = { data: 'test' }
  }

    render() {
        const {location} = this.props;
        console.log("layout");
        return (
            <div>
                <Nav location={location}/>
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">

                            {this.props.children}, data={this.state.data}

                        </div>
                    </div>
                    <Footer/>
                </div>
            </div>

        );
    }
}

//ON COMPONENT RENDER
    componentDidMount = () => {
        console.log("home");
        console.log(this.props.data);
    }

家

未定义

---

有没有关于我应该如何使用兴奋剂的建议？非常感谢您的帮助。请在布局组件中的this.state.data上登录console.log。我认为它也没有定义

我认为您需要在构造函数super（）调用之前或在构造函数外部静态地设置状态

编辑：那么this.props.children是一个react元素？你需要克隆它来传递不同的道具

React.cloneElement(this.props.children, {
    name: props.name
})

---

如果您试图直接将道具添加到子级，这将不会真正起作用，因为组件是不可变的。您应该做的是创建一个包含子对象克隆的地图

这篇博文很好地解释了这一点：

以及为您的代码修改的相关代码段：

class Layout extends React.Component {
  constructor (props) {
    super(props)
    this.state = { data: 'test' }
  }

  renderChildren() {
    return React.Children.map(this.props.children, child => {
      if (child.type === Child) {
        return React.cloneElement(child, {
          data: this.props.data
        })
      } else {
        return child
      }
    });
  }

  render() {
    const {location} = this.props;
    console.log("layout");
    return (
        <div>
            <Nav location={location}/>
            <div className="container">
                <div className="row">
                    <div className="col-lg-12">
                        {this.renderChildren()}
                    </div>
                </div>
                <Footer/>
            </div>
        </div>
    );
  }
}

类布局扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={data:'test'}
}
renderChildren（）{
返回React.Children.map（this.props.Children，child=>{
if（child.type==child）{
返回React.cloneElement（子级{
数据：this.props.data
})
}否则{
返回儿童
}
});
}
render（）{
const{location}=this.props；
控制台日志（“布局”）；
返回(
{this.renderChildren（）}
);
}
}

您确定此语法正确吗？（

{this.props.children}，data={this.state.data}

）我不完全确定，伙计，我是从LearnCoademy react教程中获得的代码，尽管这不是我通常传递道具的方式。为了排除XY问题：你为什么要这样做？不能保证

子元素
是单个元素，它也可以是数组：那么会发生什么呢？如果这是一个构建系统，您可以保证
this.props.children
实际上只是一个元素，那么请用一些代码说明您是如何实际使用它的。对于骨架自举
cloneElement
是正确的解决方案（您已经有了答案），但是“依赖子对象”也是一种反模式，除此之外：您在做什么，使您认为这是必要的。@Mike'Pomax'Kamermans this.props.children是单个元素（组件），我所要做的就是传递该组件的一些状态，因为它是从“布局”渲染的，然后cloneElement会做得很好。+1同意在布局组件中测试this.state.data。请注意，他在构造函数中的顺序对于在es6I刚刚运行的console.log（this.state.data）中设置状态来说是合适的；在布局的渲染中，它返回“test”很好，我认为我的问题在于如何将它传递给子组件，尽管指针很好。哦，this.props.children是一个react组件吗？你可能需要克隆它。cloneElement（child，{data:this.state.data}）我相信@Zoxive是正确的，请看我的答案。您能否更新您的问题，说明您是如何尝试使用React.cloneElement实现它的？这听起来像是路由器正在呈现的组件的问题。具体来说，它需要返回单个元素，而不是类似于