javascript - JSX 中的文本类型为 'string'，但预期的 'children' 类型是 'string | 元素 | 元素[]

Question

我有一个自定义的 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 | 元素 | 元素[]

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

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

我可以退出并继续使用any，但我想知道这种情况下的正确输入。

标签： javascriptreactjstypescript

Answer 1

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

interface IUploadFileButtonProps {
  children: React.ReactNode;
}