React + TypeScript：如何修复“返回类型 'Element[]' 不是有效的 JSX 元素。”？ [复制]答案

【问题标题】：React + TypeScript: How to fix "return type 'Element[]' is not a valid JSX element."? [duplicate]React + TypeScript：如何修复“返回类型 'Element[]' 不是有效的 JSX 元素。”？ [复制]
【发布时间】：2021-06-10 00:49:04
【问题描述】：

如何解决 TypeScript 上的错误

我正在使用 React 和 TypeScirpt 从头开始创建折线图。
我找到了这个视频https://www.youtube.com/watch?v=PV2kFiVi5Ns，它展示了使用 React 和 Javascript 从头开始创建折线图的方法。

我尝试将一些代码从 JavaScript 转换为 TypeScript。
出现了一些错误，我找不到解决这些错误的方法。

如何删除这些错误？

'LabelsXAxis' cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
    Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key  TS2786

  const LabelsXAxis = () => {
    const y = height - padding + FONT_SIZE * 2;

    return data.map((element, index) => {
      const x =
        (element.x / maximumXFromData) * chartWidth + padding - FONT_SIZE / 2;
      return (
        <text
          key={index}
          x={x}
          y={y}
          style={{
            fill: "#808080",
            fontSize: FONT_SIZE,
            fontFamily: "Helvetica"
          }}
        >
          {element.label}
        </text>
      );
    });
  };

【问题讨论】：

如果您的问题已经得到解答，请记得accept an answer！

标签： javascript reactjs typescript

【解决方案1】：

这是 React 的 TypeScript 类型定义的限制。 React 将允许从组件渲染函数返回数组，但 TypeScript（当前）不允许。你可以在这里找到关于它的讨论：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20356

作为一种解决方法，您可以将结果包装在 fragment: <>{ ... }</>

【讨论】：

它解决了错误。感谢您的文档！

【解决方案2】：

data.map 创建一个元素数组，不能用作元素。在这种情况下，可能适合将 data.map 包装在片段中，如下所示：

return <>{
  data.map(/*... Your code*/)
}</>

【讨论】：

它解决了错误。谢谢！