从孩子反应父母访问状态答案

【问题标题】：React parent access state from child从孩子反应父母访问状态
【发布时间】：2016-07-09 12:11:35
【问题描述】：

如何在 React 中显示来自父级中子级的状态？

var Form = React.createClass({
    render: function() {
        return (
        <form>
            <h1>***CHILD STATE CHECKED***</h1>
            {this.props.children}
        </form>
        )
    }
})

var Checkbox = React.createClass({
    getInitialState: function() {
        return {
            checked: true
        }   
    },

    toggle: function() {
        this.setState({
            checked: !this.state.checked
        });
    },

    render: function() {
        return (
            <div onClick={this.toggle} aria-checked={this.state.checked} role="checkbox"></div>
        );
    }
})

ReactDOM.render(
    <Form>
        <Checkbox />
    </Form>,
    document.querySelector('#app')
);

在其父组件内（尤其是在父组件的这个标签内）显示子组件状态的最佳方式是什么？如果没有“丑陋的技巧”，这可能吗？
当复选框被选中时，我想在表单中添加一些节点或其他组件。

【问题讨论】：

你到底想达到什么目的？显示<Checkbox/> 是否在您写***CHILD STATE CHECKED*** 的位置被选中？
是的，我想在此文本 ** *CHILD STATE CHECKED*** 中显示复选框 (state.checked) 的状态
你想在表单中只有一个复选框还是为了示例？
我想在 Form 组件中动态添加一个组件，然后从 Parent 中的这个子组件中访问一些值（例如状态）
好吧，你为什么要这么做？

标签： javascript reactjs reactive-programming

【解决方案1】：

不要在复选框中调用切换。将 Form 类的回调传递给 CheckBox 类。

在表单类中：

return(
        <CheckBox onClick={this.onClick} />
)

    onClick(){
        console.log('Checkbox clicked');
    }

在 CheckBox 类中：

    <div onClick={this.props.onClick} aria-checked={this.state.checked} role="checkbox">

在父类中管理状态，而不是在子类中。

【讨论】：

【解决方案2】：

虽然如果在父状态下管理此 CheckBox 状态的答案是正确的，但在一些更复杂的情况下，您可能仍需要将状态从子状态传递到组件：概念类似，您需要 @987654321 @，它将像回调一样使用，您将在其中处理该孩子的状态：

var Form = React.createClass({
    handleChildStateChange: function(newChildState) {
        // handle the child state change here
    }

    render: function() {
        const updatedChildren = React.Children.map(this.props.children,
            (child) => {
                return React.cloneElement(child, { updateParent: this.handleChildStateChange });
        });
        return (
            <form>
                <h1>***CHILD STATE CHECKED***</h1>
                {updatedChildren}
            </form>
        )
    }
})

然后，在子组件中更新状态时，以新状态作为参数调用传递的函数（由于状态的异步性质，我在这里使用functional setState）：

var Checkbox = React.createClass({
    getInitialState: function() {
        return {
            checked: true
        }   
    },

    toggle: function() {
        this.setState((state) => {
            state.checked = !state.checked;
            this.props.updateParent(state);
            return state;
        });
    },

    render: function() {
        return (
            <div onClick={this.toggle} aria-checked={this.state.checked} role="checkbox"></div>
        );
    }
})

最后，你使用的渲染保持不变：

ReactDOM.render(
    <Form>
        <Checkbox />
    </Form>,
    document.querySelector('#app')
);

如果您想了解更多关于将道具从孩子传递给父母的信息，this article 可能会有所帮助。

【讨论】：