如何从父组件调用子组件setState

Question

我在主应用程序中嵌套了两个基于状态的基于类的组件，一个基于父类的组件。从子组件1，我成功地调用了父回调方法。从该父回调中，我想调用子组件2的方法，因此我可以设置＃2的状态，而无需重新呈现父组件。我已经看到许多开发人员使孩子们变得无国籍，甚至只是忽略了他们。但是，React鼓励开发人员“ componenatize” ...指针plz！

Answer 1

如果是这种情况，那么您应该考虑将状态提升到父级：https://reactjs.org/docs/lifting-state-up.html

您的子组件仅应然后调用父方法来更新状态，这样，您将像React应用程序一样具有单向数据流。基本上，它鼓励您使用单一的事实来源，并确保整个应用程序中的数据同步。除此之外，它还消除了不必要的逻辑，例如您现在正在执行的操作： What does the "single source of truth" mean?

Answer 2

以父级状态存储数据，然后允许两个子级都通过setStates更新数据，只要两个子级都声明了输入，就不会违反“组件化”的概念。如果一个孩子需要在另一个孩子中更新数据，则可以跳到上下文级别并将其存储在父对象中，然后更新任一孩子的数据将触发两个孩子的渲染，以确保显示与数据保持同步。将数据保存在一个位置（父级而不是子级拆分）。

Answer 3

宾果，是的，我可以使用“ React ref”来调用子组件的实例方法。 ref是组件实例上的属性。因此，现在我的子组件使用其componentDidUpdate来调用父组件中的回调，然后父回调使用ref来调用特定子组件的“ update”方法。这些更新方法分别针对子组件和voila。

Answer 4

因此，一位同事解释说，在我的主应用程序中调用setState实际上将在所有子组件（与JSX表达式相关）上调用setState。尽管我喜欢将事件处理程序嵌套在相关子组件中的想法，但似乎最佳实践模式是将所有处理程序都放在主应用程序中，将setState放在主应用程序中，然后让React来完成其工作