从孩子反应父访问状态

Question

如何在 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')
);

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

Answer 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">  

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

Answer 2

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

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

然后，当更新子组件中的状态时，以新状态作为参数调用传递的函数（由于状态的异步特性，我在这里使用函数式 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')
);

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