Reactjs 我如何定义React道具的TypeScript类型，其中只有在道具a传递给组件时才接受道具B？

我的组件

Text

有两个道具：

isHideable:boolean

和

hidden:boolean

。只有当

isHideable

为

true

时，我如何允许

隐藏

作为道具

目前，我接受的是

isHideable

和

hidden

，这两种方法都不理想：

type Props = {
  children: React.ReactNode;
  isHideable?: boolean;
  hidden?: boolean;
};

const Text: React.FC = ({ children, isHideable, hidden }: Props) => {
  if (!isHideable && hidden) {
    console.log("No, you can’t do that.")
  }

  return (
    <span isHideable={isHideable} hidden={hidden}>
      {children}
    </span>
  );
};

---

但我想避免这种情况，因为如果接受道具的条件变得更加复杂，工会将更加混乱（例如，如果我希望d道具的接受取决于C道具，C道具取决于B道具，B道具取决于A道具）。

我认为工会是表达你意愿的唯一正确方式。对于您担心的混乱，您可以使用union&union操作来处理，以生成相交类型的union，如下所示：

type IHideability={isHideable？:false}{isHideable:true，hidden？:boolean}
类型IEditability={isEditable？：false}{isEditable:true，readonly？：boolean}
类型Props=IHideability&IEditability&{children:React.ReactNode}；

“正确”的方式可能是——以前从未听说过。StephenKoo区分并集和函数重载都可以解决您的问题，但方式不同。对于您的情况，我认为有区别的并集更好。@StephenKoo函数重载更关注外部，如果您将错误的参数传递给函数，它会报告错误。但是在函数体内部，当你定义函数时，你没有有用的代码建议和类型检查。这是一个有趣的话题，当应用于函数参数时，区分并集与函数重载的利弊。它需要一整篇文章来探索所有细节。

type IsHideable = {
  isHideable: true;
  hidden?: boolean;
}

type IsNotHideable = {
  isHideable?: false;
}

type Props = {
  children: React.ReactNode;
} & (IsHideable | IsNotHideable);