Question

无法从子组件的子组件中找出如何在父组件的this.state中设置特定属性的方法。我知道如何将函数传递给子组件，并使其影响传递给它的父组件，但是将函数传递给子组件的子组件并在其父组件的this.state状态中设置值似乎很棘手。所以这是三个层次而不是两个层次。

尽管会受到欢迎，但我不一定需要代码或示例。我只是需要一个合适的角度来解决这个问题。我是否只是将一个函数从顶级父级（通过props）传递给子级，而子级从不调用它，而是仅通过props将其通过管道传递给在单击事件中实际被调用的子级？不确定如何将其连接回父级的父级并更改this.state值

Answer 1

您可以使用Context API。您也可以使用Redux等商店。将数据存储在redux存储中，而不是组件中，并使用子级中的操作更改数据

const Context = React.createContext();

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            color: 'white'
        };
    }

    render() {
        return (
            <Context.Provider value={this.setState.bind(this)}>
                <React.Fragment>
                    <div style={{background: this.state.color}}>123</div>
                    <Child1/>
                </React.Fragment>
            </Context.Provider>
        );
    }
}

class Child1 extends React.Component {
    render() {
        return (
            <span>
                child1
                <Child2/>
            </span>
        );
    }
}

class Child2 extends React.Component {
    render() {
        return (
            <Context.Consumer>
                {(setState) => (
                    <button onClick={() => { setState({color: 'red'}); }}>child2</button>
                )}
            </Context.Consumer>
        );
    }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Answer 2

是的，将功能传递给孩子的各个环节是在香草反应中处理此问题的预期方式。

如果您发现自己的状态管理需求变得足够复杂以至于不再满足，请考虑研究类似Redux的状态管理框架。

如何在子组件的子项中更改this.state的属性值

2 个答案: