Question

我有一个名为Parent的组件，它注入了另一个组件Child。

儿童的道具定义如下：

function mapStateToProps(state) {
  return {
    foo : 'some-value'
  }
}

我想访问父组件中的foo，如下所示：

class Parent extends Component {
render(){
   //something like this
   <div className={this.props.children.foo}>
      {this.props.children}
   </div>
}

@edit

使用此React.Children.toArray后，我设法将子项作为数组并forEach - 它。

但child.props中没有道具。

缺少一些东西。有人有想法吗？

Answer 1

由于this.props.children可以是多个组件，你应该循环它

render() { 
  this.props.children.forEach((component) => {
    console.log(component.props.foo);
  })

  return ...;
}

查看this

Answer 2

您的孩子可以是单个节点或多个节点。如果是单个节点，您可以直接访问props，否则请使用map来迭代子项并返回porps。

希望这有帮助！

render() {
  const childProps = ! this.props.children instanceof Array
  ? this.props.children.props.foo //returns foo if child is a single node
  : this.props.children.map(child => child.props.foo) // returns array of foo if children is a multiple nodes.

  console.log(childProps)

  return ...;
}

使用Redux读取父组件中的子道具

2 个答案: