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')
);

在父项中显示子项状态的最佳方法是什么（特别是在父组件中的此标记内）？没有＆＃34;丑陋的技巧＆＃34;？我想在选中复选框时向表单添加一些节点或其他组件。

Answer 1

请勿在Checkbox中调用切换按钮。将一个回调从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的状态的答案是正确的，在某些更复杂的情况下，您可能仍需要将状态从子传递到组件：概念类似，您＆＃ 39; ll需要to pass a function from 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>
        )
    }
})

然后，当更新子组件中的状态时，使用新状态作为参数调用传递的函数（我在这里使用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可能会有所帮助。

从子级反应父访问状态

2 个答案: