Question

所以我试图将一些道具从我的顶级组件传递给子组件，我已经在网上搜索了一些，但是找不到任何能说明我如何传递this.props.children WITH 的东西。有些人重视我的组件的状态。这是我的代码。

布局（家长）：

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>

        );
    }
}

当我打电话给＆＃34;数据＆＃34;我下一个组件中的道具：

主页（儿童）：

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

在我的控制台中，它会返回：

家

未定义

有关我应该如何使用这个的任何指示？如有任何帮助，请提前感谢。

Answer 1

如果你试图直接向孩子们添加一个道具，那么这不会真正起作用，因为组件是不可变的。你应该做的是创建一个包含孩子克隆的地图。

这篇博客文章解释得很清楚：http://jaketrent.com/post/send-props-to-children-react/

为您的代码改变了相关的代码片段：

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

Answer 2

在Layout组件中的this.state.data上执行console.log。我也认为它未定义。

我认为你需要在构造函数super（）调用之前设置你的状态，或者静态地在构造函数之外设置你的状态。

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

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

React - 使用this.props.children传递状态

2 个答案: