Question

我有一个由React路由器使用的父组件，其渲染函数类似于：

    render() {
        return (
            <Grid>
                <Breadcrumb>
                    {this.state.breadcrumbs}
                </Breadcrumb>
                {this.props.children}
            </Grid>
        );
    }

其中一个孩子会尝试获取（）一些JSON。这个json将包含一些我想要更新父this.state.breadcrumbs的额外信息，但我不知道如何实现这一点。

Answer 1

尝试以下方法......

父组件

updateState(newState){
  this.setState({
    breadcrumbs: newState,
  })
}

 render() {
   var childrenwithProps = React.Children.map(this.props.children, function (child){
     return React.cloneElement(child, {
      updateParentState: this.updateState
     })
   })
        return (
            <Grid>
                <Breadcrumb>
                    {this.state.breadcrumbs}
                </Breadcrumb>
                {childrenwithProps}
            </Grid>
        );
    }

子组件

fetch()
.then()
.then(function(data){
  this.props.updateParentState(data)
})

传递将父作为道具的父母的状态改变为子女的功能。从子节点调用此函数，this.props.updateState以新状态作为参数。这将更新父级的状态。

希望它有所帮助。

ReactJS：如何从this.props.children调用父级的setState（）？

1 个答案: