React中如何根据父组件prop动态决定向子组件传递的属性？

你要的条件传递props需求在React中有非常成熟的实现方式，以下是对应你场景的两种常用写法：

1. 固定传递prop、仅动态修改值 #

对应你第一段伪代码的需求，不管父组件类型都要传variant，只是值不同，直接在prop赋值时写三元表达式即可，这是合法的JSX语法：

/* IntermediateComponent */
const IntermediateComponent = ({ mainProp }) => {
  return (
    <ChildComponent
      color="primary"
      variant={mainProp === 'MAIN2' ? "contained" : "outlined"}
    >
      示例标题
    </ChildComponent>
  )
}

2. 条件性决定是否传递prop #

对应你第二段伪代码的需求，满足条件才传variant，否则完全不传递该属性，可以用对象展开的方式实现：

/* IntermediateComponent */
const IntermediateComponent = ({ mainProp }) => {
  return (
    <ChildComponent
      color="primary"
      {...(mainProp === 'MAIN2' ? { variant: "contained" } : {})}
    >
      示例标题
    </ChildComponent>
  )
}

如果你的ChildComponent对variant设置了默认值，那么写成variant={mainProp === 'MAIN2' ? "contained" : undefined}和上面的写法效果完全一致，可根据你的代码风格选择。

合并相似组件的最优方案 #

如果两个组件整体结构相似、仅传递的props有差异，建议把公共props和差异化props拆分维护，逻辑更清晰也方便后续迭代：

const IntermediateComponent = ({ mainProp }) => {
  // 所有场景通用的公共props
  const commonProps = {
    color: "primary",
    children: "示例标题",
    // 其他所有通用属性都放这里
  }

  // 按父组件类型区分的差异化props
  const diffProps = mainProp === 'MAIN2' ? {
    variant: "contained",
    // 其他仅MainComponent2场景需要的prop
  } : {
    variant: "outlined",
    // 其他仅MainComponent1场景需要的prop
  }

  return <ChildComponent {...commonProps} {...diffProps} />
}

内容的提问来源于stack exchange，提问作者Konstantink1