Question

自React 16以来的React团队announced：

现在可以从组件的render方法返回一个元素数组。

这适用于常规类组件的打字稿，但我不能让它适用于无状态功能组件。

如果您想为自己重现，请参阅this repo。

代码：

import * as React from 'react';

// See this example working in a non-TS environment: https://codesandbox.io/s/ppl3wopo8j
class Hello extends React.Component {
    render() {
        return <div>
        <Foo />
        <Bar /> {/* Error: 'JSX element type 'Element[]' is not a constructor function for JSX elements. */}
      </div>;
    }
}

class Foo extends React.Component {
    render() {
        return [<div>foo</div>, <div>fooz</div>];
    }
}

function Bar() {
    // Cannot render an array from a SFC
    return [<div>bar</div>, <div>baz</div>];
}

构建此snipper会导致以下错误：

'JSX element type 'Element[]' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Element[]'.'

如您所见，从常规类组件渲染数组可以正常工作，但在从无状态功能组件渲染数组时失败。

我不确定问题是我的代码/设置，DefinitelyTyped反应类型还是打字稿本身。

Answer 1

在解决公开的Definitely Typed问题之前，最好的解决方法可能只是改用<React.Fragment/>。出于功能目的，我不认为有什么区别：

const Bar: React.SFC<CheckoutProps> = (props) => {
  return (
    <React.Fragment>
      <div>bar</div>
      <div>baz</div>
    </React.Fragment>
  );
};

Answer 2

您可以通过将组件转换为any：

来抑制错误并使代码正常工作

const Bar: any = () => [<div>bar</div>, <div>baz</div>]

Answer 3

“您现在可以从组件的渲染方法返回元素数组。”

JSX数组由React.Components render 方法编译。无状态功能组件缺少该渲染方法。

您可以将元素数组包装在父div而不是数组中，也可以使用常规类组件。

Typescript + React，从无状态功能组件渲染数组

3 个答案: