将 props 传递给子组件 Reactjs

Question

假设我有一个使用 2 个子组件的主组件，并且我想将样式对象 prop 传递给这些子组件。有没有一种方法可以传递这些道具而不直接将它们传递给主组件，因为这些道具不直接与主组件相关联，而是与子组件相关联。

<MainComponent subComponentStyling={} />

我认为我可以将子组件作为子组件传递下去：

<MainComponent>
 <SubComponent1 style={} />
 <SubComponent1  style={} />
</MainComponent>

另一方面，这两个子组件与主组件紧密连接，因为我总是将多个道具从主组件传递到子组件，所以我不能真正执行上述操作，因为我想要传递的功能存在于主要成分。

我是否必须创建一个渲染道具并通过它传递内容，或者将样式道具传递到主组件以及从主组件传递到子组件是否更方便？

我是反应新手，所以我可能错过了一些基本的东西。

Answer 1

有 3 种方法将 props 传递给子组件：

\n\n

通过普通 props：将 props 传递给 MainComponent，然后将其传递给 SubComponent。

\n\n

警告：在这种情况下，您将干扰 MainComponent 的命名空间，并使 MainComponent 知道其子组件接受的 props，这会破坏抽象。

\n\n

通过渲染道具：MainComponent 将接受渲染道具，并且不会知道它正在渲染什么。

\n\n

警告：子组件将由具有样式的父组件渲染，并通过render prop 向下传递以在主组件内渲染。这里 MainComponent 不知道 SubComponent 接受的 props，并且可以向它传递它想要的 props。但是具有样式的父组件知道子组件。另外，如果将来任何其他组件使用 MainComponent，它将必须继续传递 SubComponent 作为渲染属性。所以这违背了 DRY 原则（不要重复自己）。

\n\n

通过上下文：在这里您不需要将任何内容传递给 MainComponent。具有样式的组件将是提供者，而子组件将是消费者。Context API是 React 16 的一部分。

\n\n

注意：这里具有样式的组件只知道它需要传递的样式，而 SubComponent 只知道它需要使用的样式。MainComponent 很高兴不知道这个合同。

\n\n

我建议通过 Context 传递样式，以达到保持代码干燥的目的，并避免让 MainComponent 知道从顶部传递到 SubCompoment 的props 。

\n