TypeScript'te React Stateless Functional Component olan çocukları nasıl kullanabilirim?

TypeScript'i React ile birlikte React.Propskullandığımızda, derleyicinin tüm react bileşen props'larının çocuklara sahip olabileceğini bilmesi için artık genişletmemize gerek yok :

interface MyProps { }

class MyComponent extends React.Component<MyProps, {}> {
  public render(): JSX.Element {
    return <div>{this.props.children}</div>;
  }
}

Ancak, durum bilgisi olmayan işlevsel bileşenler için durum böyle görünmüyor:

const MyStatelessComponent = (props: MyProps) => {
  return (
    <div>{props.children}</div>
  );
};

Derleme hatasını yayar:

Hata: (102, 17) TS2339: "Çocuk" özelliği "MyProps" türünde mevcut değil.

Sanırım bunun nedeni derleyicinin childrenprops argümanında bir vanilya fonksiyonunun verileceğini bilmesinin bir yolu olmamasıdır .

Öyleyse soru, TypeScript'teki durumsuz bir işlevsel bileşende çocukları nasıl kullanmalıyız?

Eski yöntemine geri dönebilirdim MyProps extends React.Props, ancak Propsarayüz kullanımdan kaldırıldı olarak işaretlendi ve durum bilgisiz bileşenlerde Props.refanladığım kadarıyla a yok veya destek yok.

Böylece childrenpervaneyi manuel olarak tanımlayabilirim :

interface MyProps {
  children?: React.ReactNode;
}

İlk olarak: ReactNodedoğru tip mi?

İkincisi: Çocukları isteğe bağlı ( ?) olarak yazmalıyım, aksi takdirde tüketiciler bunun component ( ) ' nin childrenbir özelliği olduğunu düşünecek <MyStatelessComponent children={} />ve bir değer verilmemişse bir hata ortaya çıkaracaktır .

Görünüşe göre bir şey kaçırıyorum. Son örneğimin React'teki çocuklarla vatansız işlevsel bileşenleri kullanmanın yolu olup olmadığı konusunda biraz netlik sağlayabilir mi?

React 16.8 Güncellemesi: React 16.8'den beri, isimler React.SFCve React.StatelessComponentkullanımdan kaldırılmıştır. Aslında, React.FunctionComponenttür için veya React.FCkısaca takma adlar haline geldiler .

Yine de onları aynı şekilde kullanırsınız:

const MyStatelessComponent : React.FunctionComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

React 16.8'den Önce (Daha Eski):

Şimdilik türü şu şekilde kullanabilirsiniz React.StatelessComponent<>:

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <div>{props.children}</div>

Eklediğim şey, bileşenin dönüş türünü yazılacak şekilde ayarlamak React.StatelessComponent.

Kendi özel donanımınıza sahip bir bileşen için ( MyPropsarayüz gibi ):

const MyStatelessComponent : React.StatelessComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

Şimdi, propsvar childrenmülkiyet yanı sıra gelenler MyPropsarayüzüne.

Bunu typecript 2.0.7 sürümünde kontrol ettim

Ek olarak, kısalık React.SFCyerine kullanabilirsiniz React.StatelessComponent.

React.PropsWithChildren<P>Dikmeleriniz için türü kullanabilirsiniz :

interface MyProps { }

function MyComponent(props: React.PropsWithChildren<MyProps>) {
  return <div>{props.children}</div>;
}

Kullanabilirsiniz

interface YourProps { }
const yourComponent: React.SFC<YourProps> = props => {}

Daha basit cevap: Şunu kullanın ReactNode:

interface MyProps {
  children?: React.ReactNode
}

Eğer childrenisteğe bağlı olup (yani sahip ?veya değil) sizin bileşen bağlıdır. Bunu ?ifade etmenin en kısa yolu bu, yani bunda yanlış bir şey yok.

Geçmişle ilgili: Bu, ilk sorulduğunda mutlaka doğru cevap değildi: Tür ReactNode, Mart 2017'de yalnızca bu çekme talebiyle (neredeyse) mevcut biçimine eklendi , ancak bugün bunu okuyan hemen hemen herkes React'in yeterince modern bir sürümünde olmalı .

Son olarak, children"öznitelik" olarak geçiş hakkında (React dilinde bunu öznitelik olarak değil, "prop" olarak iletmek olurdu): Mümkündür, ancak çoğu durumda JSX çocuklarını geçerken daha iyi okur:

<MyComponent>
  <p>This is part of the children.</p>
</MyComponent>

şundan daha kolay okur

<MyComponent children={<p>This is part of the children.</p>} />

Sadece bileşene alt öğeler ekleyebilirsiniz ve eğer bir konteynere bağlıysa ihtiyacınız olan tek şey budur.

const MyComponent = ({ 
   children  
}) => {
  return <div>{children}</div>

}