React 中是否可以根据父组件的 prop 来定义传递（以及是否传递）哪个 prop 给子组件？

Question

基本上想象一下下面的情况，现有的组件有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>

我知道下面的设置是行不通的，所以请把它看成伪代码，但基本上我想要实现的是根据一个道具的价值 (mainProp)正在从 MainComponent1 或 MainComponent2 传递以确定传递给 ChildComponent 的某些道具（在本例中为 variant）是否应该具有特定值甚至通过。

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

Answer 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

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?

javascript

reactjs

frontend

react-props

web-frontend