React:将子状态传递给父状态

Question

我和React工作了一年多,我读过思考反应,提升状态,状态和生命周期.

我了解到React的数据流概​​念是单向数据流.

来自这些页面的Citates:

React的单向数据流(也称为单向绑定)可以保持模块化和快速的一切.

请记住:React是关于组件层次结构中的单向数据流.可能不会立即清楚哪个组件应该拥有哪个状态.对于新手来说,这通常是最具挑战性的部分,因此请按照以下步骤弄明白:......

如果您将组件树想象为道具的瀑布,每个组件的状态就像一个额外的水源,它在任意点连接它,但也向下流动.

据我所知,不允许使用以下示例,因为我将子状态数据传递给父级.但我看到一些开发人员这样工作:

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { fromParent: null };
    }

    addSomething(stateValueFromChild) {
        this.setState({fromParent: stateValueFromChild});
    }

    render() {
        return <Child
                addSomething={(stateValueFromChild) => this.addSomething(stateValueFromChild)}>
                 // ...
        </Child>;
    }
}

class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = { fromChild: 'foo' };
    }

    render() {
        return <Form onSubmit={() => this.props.addSomething(this.state.fromChild)}>
                 // ...
        </Form>;
    }
}

我现在的问题是:

• 这真的不允许吗？
• 为什么这不是模块化和快速的？
• 这真的是制动单向数据流,成为双向数据流吗？
• 这种方式可能会发生什么其他问题？
• 当我举起国家时,你会如何解决以下案件; 50个使用该子组件的具体父级,是否每个父级对于他们使用的同一个孩子具有相同的初始化子状态？

Answer 1

这是允许的，并且您的代码没有任何问题，但我不会将其称为从子级传递状态到父级。您所做的就是调用在 props 中传递的方法，并由带有某个参数的事件触发，在您的示例中，该参数是子级的状态值，但它可以是任何其他变量。父组件对该参数的性质一无所知，它只是接收该值并能够用它做任何事情，例如将其自己的状态更改为另一个状态。如果子级的状态发生变化，则在没有再次触发事件的情况下，父级将不会收到此更新。onSubmit但是，当 props 发生变化时，子级总是会从父级接收更新并自动重新渲染。当然，一些道具可能是一些父母的状态。这是行为上的主要区别。

有一篇很好的文章详细解释了这一点：Props down，Events Up