web-dev-qa-db-ja.com

typescriptでreact16配列要素を返します

新しいreact16機能を使用してrenderの配列要素を返したいのですが、TypeScriptエラーが発生しますProperty 'type' is missing in type 'Element[]'

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

何が足りないのですか？ @ types/react 16.0.1およびTypeScript 2.5.を使用する

javascriptreactjstypescriptjsx
10
David Spiess

最新の入力を確認しましたが、ステートレスコンポーネントインターフェイスに新しい定義を追加するのを忘れていました。私は問題を提起しました、そしてそれはすぐに修正されるはずです。

クラスコンポーネントから配列を返すことは機能するので、今本当に必要な場合は、機能コンポーネントをクラスコンポーネントに変換できます。

class Elements extends React.Component<{}> {

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

  }
}

または、モジュール拡張を使用してReact入力を一時的に拡張します。次のコードを.tsファイルの1つに配置するだけで、TypeScriptが定義の変更を自動的に検出します。

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;
  }
}
7
niba

または使用 Reactフラグメント ：

render() {
    return 
       <>
        <div key="a"></div>,
        <div key="b"></div>
       </>
}
4
Niki