无法将函数克隆到子组件中

Question

我有以下代码

<Modal>
    <InviteForm {...props} />
</Modal>

在模态中

render() {
    return (<div>
        {React.cloneElement(this.props.children, {hideModal: this.hideModal})}
    </div>)
}

但是在InviteForm中，hideModal函数不会出现在props中。我不正确地克隆了这个元素吗？

Answer 1

React儿童感到困惑，因为它可能是一个单独的对象或一组儿童。

我会使用React.Children.map

React.Children.map(this.props.children, function(child){
  return React.cloneElement(child, {hideModal: this.hideModal})
}.bind(this))

https://facebook.github.io/react/docs/top-level-api.html#react.children