Javascript JSX中的文本类型为'；字符串'；，但是'；儿童'；是'；字符串|元素|元素[]

我有一个自定义的React按钮组件，我希望能够将带有或不带可选图标的可选字符串（

JSX.Element

）作为cildren

我的界面看起来像这样

interface IUploadFileButtonProps {
  children: string | JSX.Element | JSX.Element[];
}

以及实施：

// Does not work
<UploadFileButton>
  <FaUpload />
  Add new list
</UploadFileButton>

// Works
<UploadFileButton>
  No icon, just text
</UploadFileButton>

// Works
<UploadFileButton>
  <FaUpload />
</UploadFileButton>

// Works
<UploadFileButton>
  <FaUpload />
  <FaUpload />
</UploadFileButton>

//不起作用
添加新列表
//工作
没有图标，只有文本
//工作
//工作

我收到以下错误消息：

JSX中的文本类型为“string”，但应为“children”类型 是'string | Element | Element[]

我想这是因为Typescript需要其中一种类型，但一次不能超过一种类型

如何将可选字符串和/或可选JSX.Elements指定为类型（如果有意义的话）

---

我可以退出并使用

any

，但我想知道此场景的正确键入方式。

您可以使用React.ReactNode键入子数组，为什么要定义自己的子数组

interface IUploadFileButtonProps {
  children: React.ReactNode;
}

您可以将

（string | JSX.Element）[

添加到类型定义中

interface IUploadFileButtonProps {
  children: string | JSX.Element | JSX.Element[] | (string | JSX.Element)[];
}

---

我不知道ReadNode。但是我得到

名称空间“React”没有导出成员“ReadNode”

试图将其用作类型您使用的是@types/React的哪个版本？”@types/React:“^16.9.23”@mottosson很抱歉，我的答案中有一个输入错误，我现在才注意到。啊，太好了！谢谢！这不是正确的答案，但很高兴知道这样的组合类型是可能的。谢谢