React团队宣布，自React 16以来：
现在可以从组件的渲染方法返回元素数组。
这在typescript中适用于常规类组件，但我无法使其适用于无状态功能组件。
如果您想自己复制，请参阅此回购协议。
代码：
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类型还是typescript本身。
在解决开放的绝对类型问题之前，最好的工作可能只是使用
const Bar: React.SFC<CheckoutProps> = (props) => {
return (
<React.Fragment>
<div>bar</div>
<div>baz</div>
</React.Fragment>
);
};
通过将组件强制转换为any，可以抑制错误并使代码正常工作：
const Bar: any = () => [<div>bar</div>, <div>baz</div>]
“现在可以从组件的渲染方法返回元素数组。”
JSX的数组正在由React编译。组件呈现方法。无状态函数组件缺少该呈现方法。
您可以将元素数组包装在父div中而不是数组中，或者使用常规类组件。
