如果返回数组，如何为 ReactFC 重写接口？

Question

使用 React.FC 而不是直接类型的项目样式

这是工作：

interface IConfigActions {
  iconColor: string;
}

const ConfigActions = ({iconColor}: IConfigActions) => {
  return (
    [
      { id: 1, icon: <MediaSVG style={{ fill: iconColor }} /> },
      { id: 2, icon: <GifSVG style={{ fill: iconColor }} /> },
      { id: 3, icon: <PollSVG style={{ fill: iconColor }} /> },
      { id: 4, icon: <EmojiSVG style={{ fill: iconColor }} /> },
      { id: 5, icon: <ScheduleSVG style={{ fill: iconColor }} /> },
    ]
  )
}

但是下一个代码给我一个错误

const ConfigActions:FC<IConfigActions> = ({iconColor}) => {
  return (
    [
      { id: 1, icon: <MediaSVG style={{ fill: iconColor }} /> },
      { id: 2, icon: <GifSVG style={{ fill: iconColor }} /> },
      { id: 3, icon: <PollSVG style={{ fill: iconColor }} /> },
      { id: 4, icon: <EmojiSVG style={{ fill: iconColor }} /> },
      { id: 5, icon: <ScheduleSVG style={{ fill: iconColor }} /> },
    ]
  )
}

Type '({ iconColor }: IConfigActions) => { id: number;图标：元素； }[]' 不可分配给类型 'FC'。 输入'{ id: number;图标：元素； }[]' 缺少类型 'ReactElement' 中的以下属性：type、props、keyts(2322)

Answer 1

在您的代码中，您试图从 ConfigActions 组件返回一个对象数组。但是，对于 React 功能组件，您需要返回单个 React 元素（或元素片段）。

您可以将上面的代码包装为：

const ConfigActions: FC<IConfigActions> = ({ iconColor }) => {
  return (
    <div>
      {[
        { id: 1, icon: <MediaSVG style={{ fill: iconColor }} /> },
        { id: 2, icon: <GifSVG style={{ fill: iconColor }} /> },
        { id: 3, icon: <PollSVG style={{ fill: iconColor }} /> },
        { id: 4, icon: <EmojiSVG style={{ fill: iconColor }} /> },
        { id: 5, icon: <ScheduleSVG style={{ fill: iconColor }} /> },
      ]}
    </div>
  );
};