Question

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

<MainComponent subComponentStyling={} />

我认为我可以在将子组件作为子代传递的情况下做到这一点：

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

另一方面，这两个子组件紧密地连接到主组件，因为我总是将多个道具从主组件传递到子组件，因此由于要传递的功能，我无法真正做到以上几点下降存在于主要成分中。

我是否必须创建一个渲染道具并将其向下传递，还是将样式道具向下传递到主要组件以及从主要组件传递到子组件更方便？

我是新手，所以我可能错过了一些基本知识。

Answer 1

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

通过普通道具：将道具传递到MainComponent，然后将其传递到SubComponent。

注意事项：在这种情况下，您将干扰MainComponent的名称空间并 MainComponent知道其子级接受的道具击败抽象。

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

注意事项：子组件将由具有样式的父级呈现并通过 render 道具传递下来，以在 MainComponent。这里MainComponent不知道接受的道具由SubComponent传递，并可以传递所需的道具。但是父母具有样式的控件知道SubComponent。加在如果将来有任何其他组件使用MainComponent，它将将必须继续传递SubComponent作为渲染道具。所以这违反了DRY原则（请勿重复）。

通过上下文：在这里，您无需传递任何内容到MainComponent。具有样式的组件将成为提供者，而子组件将成为使用者。 Context API是React 16的一部分。

注意事项：在这里，具有样式的组件仅知道需要传递的样式，而SubComponent仅知道需要使用的样式。 MainComponent很高兴没有意识到这份合同。

我建议通过Context传递样式，以实现保持代码DRY的目的，并且避免使MainComponent了解从顶部传递到SubCompoment的道具。

Answer 2

您可以使用 React 提供的Context来将样式传递给<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/pie.js"></script> <div id="parent"> <div id="charts"> <div id="chart1" class="chartdiv"></div> <div id="chart2" class="chartdiv"></div> <div id="chart3" class="chartdiv"></div> <div id="chart4" class="chartdiv"></div> </div> <div id="charts1"> <div id="chart11" class="chartdiv"></div> <div id="chart22" class="chartdiv"></div>  </div> </div>，而无需通过SubComponent

以下是相同的示例-

MainComponent

Answer 3

我可能完全误解了您的要求（对不起，很抱歉）。但是，如果要向下传递样式，则可以像这样在数组中进行。

<View style={[subComponentStyling, {backgroundColor: blue}]}>
  ...
</View>

将道具传递给子组件Reactjs

3 个答案: