TypeScript ve React - çocuklar yazıyor mu?

Aşağıdaki gibi çok basit bir işlevsel bileşene sahibim:

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


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

export default aux;

Ve başka bir bileşen:

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;

Şu hatayı almaya devam ediyorum:

[ts] JSX öğe türü 'ReactNode', JSX öğeleri için bir yapıcı işlevi değildir. 'Undefined' türü 'ElementClass' türüne atanamaz. [2605]

Bunu nasıl doğru yazabilirim?

Sadece children: React.ReactNode

<Aux>JSX'inizde kullanmak için geri dönen bir fonksiyon olması gerekir ReactElement<any> | null. Bu, bir fonksiyon bileşeninin tanımıdır .

Ancak, şu anda React.ReactNodeçok daha geniş bir tür olan geri dönen bir işlev olarak tanımlanmaktadır . React yazılarının dediği gibi:

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

Döndürülen değeri React Fragment ( <></>) içine sararak istenmeyen türlerin etkisiz hale getirildiğinden emin olun :

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

Bu benim için çalıştı:

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

Düzenle Onun children: React.ReactNodeyerine şimdi kullanmanızı tavsiye ederim .

Bileşeninizi şu şekilde ilan edebilirsiniz:

const MyComponent: React.FunctionComponent = (props) => {
    return props.children;
}

Sen kullanabilirsiniz ReactChildrenve ReactChild:

import React, { ReactChildren, ReactChild } from 'react';

interface AuxProps {
  children: ReactChild | ReactChildren;
}

const Aux = ({ children }: AuxProps) => (<div>{children}</div>);

export default Aux;

TypeScript sitesinden: https://github.com/Microsoft/TypeScript/issues/6471

Önerilen uygulama, sahne türünü {children ?: any} olarak yazmaktır.

Bu benim için çalıştı. Alt düğüm birçok farklı şey olabilir, bu nedenle açık yazım vakaları kaçırabilir.

Takip konusunda daha uzun bir tartışma var: https://github.com/Microsoft/TypeScript/issues/13618 , ancak herhangi bir yaklaşım hala çalışıyor.

İşlev bileşeni dönüş türü, JSXElement | nullTypeScript ile sınırlıdır . Bu bir akım türü sınırlamasıdır, saf React daha fazla dönüş türüne izin verir .

Minimal gösteri pasajı

Geçici çözüm olarak bir tür iddiası veya Parçalar kullanabilirsiniz:

const Aux = (props: AuxProps) => <>props.children</>; 
const Aux2 = (props: AuxProps) => props.children as ReactElement; 

ReactNode

children: React.ReactNodehedef güçlü türlere sahip olmaksa yetersiz olabilir Aux.

Hemen hemen her şey ReactNode, eşdeğer olan geçerli türe atanabilir {} | undefined | null. Vakanız için daha güvenli bir tür şunlar olabilir:

interface AuxProps {
  children: ReactElement | ReactElement[]
}

Misal:

Verilen Auxihtiyaçlar için React elementleri gibi children, yanlışlıkla stringona bir ekledik . O zaman yukarıdaki çözüm , tersine hata verecektir ReactNode- bağlantılı oyun alanlarına bir göz atın.

Yazılan childrenbir gibi non-JSX sahne için yararlı olan Prop oluşturulma geri arama.

Ayrıca kullanabilirsiniz React.PropsWithChildren<P>.

type ComponentWithChildProps = React.PropsWithChildren<{example?: string}>;

Genel türlü bulmak için bir yol örneğin gereğidir. Daktilo etmenin güzelliği , doğru dosyalara sahip olduğunuz sürece tüm türlere erişiminizin olmasıdır @types/.

Bunu kendim yanıtlamak için, childrenpervaneye sahip bir bileşen tepkimenin kullanımlarını düşündüm . Akla gelen ilk şey? Nasıl bir <div />?

Tek yapmanız gereken, vscode'u açmak ve .tsxbir react projesinde @types/react.

import React from 'react';

export default () => (
  <div children={'test'} />
);

Pervanenin üzerine gelmek childrensize türü gösterir. Ve ne biliyorsun - Tipi ReactNode(gerek yok ReactNode[]).

Daha sonra tip tanımına tıklarsanız, sizi doğrudan arayüzden childrengelme tanımına getirir DOMAttributes.

// node_modules/@types/react/index.d.ts
interface DOMAttributes<T> {
  children?: ReactNode;
  ...
}

Not: Bu işlem, herhangi bir bilinmeyen türü bulmak için kullanılmalıdır! Hepsi orada, onları bulmanı bekliyor :)

Çocuk içeren bir tür olarak kullanıyorum:

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

Bu alt kapsayıcı türü, tüm farklı durumları destekleyecek kadar geneldir ve ayrıca ReactJS API ile uyumludur.

Yani, örneğiniz için şöyle bir şey olabilir:

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

Bu cevapların modası geçmiş gibi görünüyor - React artık yerleşik bir türe sahip PropsWithChildren<{}>. Bu sayfadaki bazı doğru cevaplara benzer şekilde tanımlanmıştır:

type PropsWithChildren<P> = P & { children?: ReactNode };

React bileşenleri tek bir sarmalayıcı düğüme sahip olmalı veya bir düğüm dizisi döndürmelidir.

Kişisel <Aux>...</Aux>bileşen iki düğüme sahiptir divvemain .

Bir çocuklarınızı sarmak için deneyin diviçinde Auxbileşen.

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

const aux = (props: AuxProps) => (<div>{props.children}</div>);

export default aux;