在reactjs中从父级调用children方法的最佳方法是什么？

Question

从我发现的你可以使用两种方法，如果你需要从父进行子方法。

1. props您可以使用道具并倾听特定的更改

export default class SomeClass extends Component { ... componentDidUpdate(oldProps) { if(oldProps.someValue !== this.props.someValue) { //prop changed, trigger children method } } ... }

1. ref您可以使用对儿童的引用

export default class SomeClass extends Component { ... componentDidMount() { this.refs.children.execute() } render() { return ( <Children ref="children" /> ) } ... } 还有其他方法吗？我发现第一种方法很难做，如果有很多props.I相信第二种也不好，因为如果你改变一次功能，它必须在任何地方重构。

Answer 1

简短的回答是：“在reactjs中调用来自父级的子方法”只能间接，永远直接。

你可以使用道具从父母传给孩子，
并且在子项内部有一个基于prop执行的方法，或者在prop更改时 看起来您的选项1描述了您只想在支柱更改上执行子方法的场景 使用“不止一些道具”这似乎很难做到，但好处是你可以在一个地方管理所有复杂性：在孩子本身内部。这使您的代码更易于维护和调试。

另一种方法是：在子项内部，为某个事件添加一个侦听器，触发子项自己的方法。事件可以是DOM事件（例如onChange或onKeyDown），如果使用flux，则可以更改商店。

您可以将方法从父级传递给子级作为道具，以允许子级调用父级方法。但是你不能将一个方法从子传递到父级，让父级调用子方法。

这些是反应组件内部方法的唯一干净方法。

你真的不应该使用refs直接调用孩子的方法。永远不会。不是来自父母，也不来自其他任何地方。