javascript - 将 Prop 传递给子组件 Reactjs

Question

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

<MainComponent subComponentStyling={} />

我认为我可以在将子组件作为子组件向下传递的情况下执行此操作:

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

另一方面，这两个子组件与主组件紧密相连，因为我总是将多个 props 从主组件传递到子组件，所以我不能真正做到上述，因为我想传递的功能down 存在于主要组件中。

我是否必须创建一个渲染 Prop 并通过它向下传递东西，还是将样式 Prop 向下传递到主组件并从主组件传递到子组件更方便？

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

Answer 1

有 3 种方法可以将 props 传递给子组件:

通过普 channel 具:将 Prop 传递给 MainComponent，MainComponent 会将其传递给 SubComponent。

警告:在这种情况下，您将 干扰 MainComponent 的命名空间并使 MainComponent 知道它的 child 接受的 Prop 打败抽象。

通过 render props:MainComponent 将接受一个 render prop 并且不会知道它正在渲染什么。

警告:子组件将由具有样式的父组件呈现 并通过 render 属性向下传递以在 主要组件。这里 MainComponent 不知道接受的 Prop 通过 SubComponent 并可以传递它想要的 Prop 。但是家长 具有样式的组件知道 SubComponent。再加上 future 如果任何其他组件将来使用 MainComponent，它 将不得不继续将 SubComponent 作为 render prop 传递。所以这 违背了 DRY 原则(不要重复自己)。

Via context:在这里您不需要向 MainComponent 传递任何内容。具有样式的组件将成为提供者，而子组件将成为消费者。 Context API是 React 16 的一部分。

警告:这里具有样式的组件只知道它需要传递的样式，而 SubComponent 只知道它需要使用的样式。 MainComponent 很高兴地不知道这个契约。

我建议通过 Context 传递样式 以实现保持代码 DRY 和避免让 MainComponent 知道 props 从顶部向下传递到 SubCompoment 的目的。