Javascript 其属性类型可以根据特定属性更改的通用组件接口

是否有方法使用Typescript创建React组件，其中某些属性根据不同属性的存在/类型更改其类型

我正在尝试构建一个通用的react-select组件，它可以是多选组件，也可以是单选组件。它将具有一个

renderValues

属性，用于呈现选定的值。理想情况下，如果此组件是多选组件，则RenderValue将具有以下签名：

(selected: T[]) => JSX.Element

如果是单选的话，就会有签名

(selected: T) => JSX.Element

多选组件的一个示例是：

<SingleOrMultiSelect
  multiple={true}
  value={['foo','bar']}
  options={['foo','bar','biz','baz']}
  renderValues={(opts: string[])=> opts.join(', ')}
  name={'Example Multi Select'
/>

opts.join（'，）}
名称={'Example Multi-Select'
/>

它主要基于来自的

OverideableComponent

，但我似乎无法让它正常工作

实际上，我将把这个逻辑分成一个单选择组件和一个多选择组件，或者更可能只需要

renderValues

来始终期望一个数组，但是我现在很好奇是否有一种干净的方法来实现我最初想要做的事情

---

使用

的附加游乐场链接，您可以执行以下操作

interface SingleSelectProps {
  multiple: true;
  renderValues: (opts: string[]) => React.ReactNode
}

interface MultiSelectProps {
  multiple: false;
  renderValues: (opts: string) => React.ReactNode
}

type SingleOrMultiSelectProps = SingleSelectProps | MultiSelectProps;

---

啊，谢谢你，这比我刚才遇到的兔子洞要简单得多。这没有直接关系，但在实现这一点时出现了一些问题：为了让组件能够知道它使用的是哪个版本，我不能使用解构的道具，我需要像这样引用它们：

if（props.multiple）…

我在原始帖子中添加了一个示例游乐场链接。你知道是否可以绕过这个问题吗？是的，在这种情况下，Typescript无法推断类型。它只是它的工作方式，因为现在每个属性都不再相关了。它变成了单独的属性。