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中的文本的类型为“字符串”，但预期的类型为“子级”
  是“字符串|元素|元件[]


我猜想是因为Typescript需要一种类型，但当时不超过一种类型。

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

我可以纾困并使用any，但是我想知道这种情况下的正确键入。

最佳答案

您可以使用React.ReactNode来输入children数组，为什么要定义自己的数组呢？

interface IUploadFileButtonProps {
  children: React.ReactNode;
}