在 React 中是否可以根据父组件的 prop 定义将哪个 prop 传递（以及是否传递）给子组件？ [复制]答案

【问题标题】：Is it possible in React to define which prop to pass (and whether to pass) to child components based on prop from parent component? [duplicate]在 React 中是否可以根据父组件的 prop 定义将哪个 prop 传递（以及是否传递）给子组件？ [复制]
【发布时间】：2021-11-01 22:04:51
【问题描述】：

基本上想象如下情况，现有组件有4个：MainComponent1、MainComponent2、IntermediateComponent和ChildComponent。 MainComponent1 和MainComponent2 可以使用IntermediateComponent 作为它们的子组件，而ChildComponent 是IntermediateComponent 的子组件。

根据哪个组件是 IntermediateComponent 的父组件，IntermediateComponent 传递给 ChildComponent 的道具可以是 2 个选项中的 1 个，也可能是某些道具会是仅适用于MainComponent1 的后代（至于通过IntermediateComponent 的间接子代）。

是否可以使用 React 设置类似这样的设置：

/* 中间组件 */

<ChildComponent
  color="primary"
  {mainProp === 'MAIN2' ? variant="contained" : variant="outlined"}>
   Example Title
</ChildComponent>

或

<ChildComponent
  color="primary"
  {mainProp === 'MAIN2' ? variant="contained" : undefined}>
   Example Title
</ChildComponent>

我知道以下设置不起作用，因此请将其视为伪代码，但基本上我想要实现的是取决于一个 prop (mainProp) 的值从MainComponent1 或 MainComponent2 来确定传递给 ChildComponent 的某些 prop（在本例中为 variant）是否应该具有特定值，或者甚至不应该传递。

我现在正在尝试在应用程序中组合 2 个组件，它们在整体结构上相似，但必须将不同的道具传递给子组件。有什么更好的解决方案来实现这样的事情？

【问题讨论】：

是的，你可以试试这个示例标题
这能回答你的问题吗？ React.js -- How to pass properties object to child component?

标签： javascript reactjs frontend react-props web-frontend

【解决方案1】：

有条件地简单地设置值怎么样：

<ChildComponent
  color="primary"
  variant={mainProp === 'MAIN2' ? 'contained' : undefined}
>
   Example Title
</ChildComponent>

如果事情变得更复杂，你可以随时展开：

<ChildComponent
  color="primary"
  ...(mainProp === 'MAIN2' ? { a: 10, b: 11 } : { y: 123 })
>
   Example Title
</ChildComponent>

这将添加a=10 和b=11 或y=123

【讨论】：