web-dev-qa-db-ja.com

TypeScriptとReact-子供のタイプ？

次のような非常に単純な機能コンポーネントがあります。

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


const aux = (props: AuxProps) => props.children;

export default aux;

そして別のコンポーネント：

import * as React from "react";

export interface LayoutProps  { 
   children: React.ReactNode
}

const layout = (props: LayoutProps) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {props.children}
        </main>
    <Aux/>
);

export default layout;

次のエラーが発生し続けます。

[ts] JSX要素タイプ 'ReactNode'は、JSX要素のコンストラクタ関数ではありません。タイプ「未定義」はタイプ「ElementClass」に割り当てることができません。 [2605]

これを正しく入力するにはどうすればよいですか？

reactjstypescriptjsxtypescript2.0
86
Asool

JSXで<Aux>を使用するには、ReactElement<any> | nullを返す関数である必要があります。これが関数コンポーネントの定義です。

ただし、現在はより広い型であるReact.ReactNodeを返す関数として定義されています。 Reactタイピングは言う：

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

戻り値をReact Fragment（<></>）にラップすることにより、不要なタイプが無力化されていることを確認してください：

const aux: React.FC<AuxProps> = props =>
  <>{props.children}</>;
2
Karol Majewski

これは私のために働いたものです：

interface Props {
  children: JSX.Element[] | JSX.Element
}
1
sunknudsen

子を含む型として、私は使用しています：

type ChildrenContainer = Pick<JSX.IntrinsicElements["div"], "children">

この子コンテナタイプは、さまざまなケースをすべてサポートするのに十分汎用的であり、ReactJS APIとも整合しています。

したがって、あなたの例では、次のようになります。

const layout = ({ children }: ChildrenContainer) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {children}
        </main>
    <Aux/>
)
0
Denis