在REACT

Question

示例我们有一个父组件（我称它为动物） 以及几个子组件（狗，猫，马）和子组件（Collie，英国猎狐犬，猎狐犬，德国牧羊犬）。如果我想从动物向牧羊犬发送一个函数，我必须将此函数发送到Dog组件，然后从Dog寄给Collie，只有在2个道具之后，我才能在Collie组件中使用此函数。有没有更好的方法可以将动物的功能直接发送给牧羊犬？

Answer 1

正如其他人在上面提到的那样，在新版本的react中引入的新Context API可能在react版本中有所不同，但仍然不建议这样做，只是避免将props传递到组件树中较少的级别。

如果您不希望使用redux（如本例所示，使用率较低）可能比较复杂，那么组件组成是更好的选择。

https://reactjs.org/docs/context.html#before-you-use-context

在这种情况下，您基本上会创建<Animal/>到预期子节点的父组件，<Dog />也会期望子节点，然后可以将其与道具一起传递给<Collie />。

Answer 2

使用上下文API。 在官方文档中了解更多信息：https://reactjs.org/docs/context.html

基本上，您定义一个上下文值并将其传递给提供者，该提供者可以由子树中的任何节点访问。

请注意，Context API对于不同版本的React有所不同，并且将来可能会更改。您还可以在内部使用上下文api使用Redux和react-redux进行状态管理。

Answer 3

您可以使用现已正式的React Context API。有关如何使用此功能的更多信息，请参见此处-https://hackernoon.com/how-to-use-the-new-react-context-api-fce011e7d87

Answer 4

我建议您看一下React“ Component Composition”模式（文档：https://reactjs.org/docs/composition-vs-inheritance.html）。它非常简单，而且没有React Context有时可能会发生的可重用性问题。

Ta-ta