在打字稿中返回反应 16 个数组元素

Posted 2023-02-21

【中文标题】在打字稿中返回反应 16 个数组元素

【英文标题】：Return react 16 array elements in typescript

【发布时间】：2018-03-20 11:45:45

【问题描述】：

我想使用新的 react 16 功能在我的 render 中返回数组元素，但我收到了打字稿错误 Property 'type' is missing in type 'Element[]'

const Elements: StatelessComponent<> = () => ([
  <div key="a"></div>,
  <div key="b"></div>
]);

我错过了什么？使用 @types/react 16.0.10 和 typescript 2.5.3

【问题讨论】：

它仍然是一个新版本，打字还没有准备好。这里有一个链接，您可以在其中关注进度：github.com/DefinitelyTyped/DefinitelyTyped/pull/19363（他们几天前将其合并，但人们仍然遇到问题）

感谢您的链接！

【参考方案1】：

我检查了最新的类型，他们忘记在无状态组件界面中添加新定义。我已经提出了这个问题，应该很快就会解决。

从类组件返回一个数组是可行的，所以如果你现在真的需要它，你可以将你的功能组件转换为类组件。

class Elements extends React.Component<> 

  render() 
    return [
       <div key="a"></div>,
       <div key="b"></div>
    ]

  

或使用模块扩充临时扩展 React 类型。只需将以下代码放在您的一个 .ts 文件中的某个位置，打字稿就会自动检测定义中的更改。

declare module "react" 
  interface StatelessComponent<P = > 
    (props: P &  children?: ReactNode , context?: any): ReactElement<any>[] | ReactElement<any> | null;
    propTypes?: ValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
  

【讨论】：

嗨！有问题的链接吗？仍然没有修复=\谢谢。想把它提高一点

这是我能找到的关于这个问题的最新讨论：github.com/DefinitelyTyped/DefinitelyTyped/issues/20356

Typescript repo 中有一个 PR 正在等待合并。 github.com/Microsoft/TypeScript/pull/20239

现在好像有一个更新的 PR ——但仍未解决：github.com/microsoft/TypeScript/issues/21699

我认为重构类组件并不能解决问题。请查看***.com/questions/54017454/…

【参考方案2】：

或者使用React fragments:

render() 
    return 
       <>
        <div key="a"></div>,
        <div key="b"></div>
       </>

【讨论】：

好电话！这样干净多了。

React 期望返回一个对象而不是一个数组，所以这是一个可靠的方法