TypeScript và React - kiểu con?

Tôi có một thành phần chức năng rất đơn giản như sau:

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


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

export default aux;

Và một thành phần khác:

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;

Tôi tiếp tục gặp lỗi sau:

[ts] Loại phần tử JSX 'ReactNode' không phải là một hàm tạo cho các phần tử JSX. Không thể gán loại 'undefined' cho loại 'ElementClass'. [2605]

Làm cách nào để gõ đúng?

Chỉ children: React.ReactNode

Để sử dụng <Aux>trong JSX của bạn, nó cần phải là một hàm trả về ReactElement<any> | null. Đó là định nghĩa của một thành phần chức năng .

Tuy nhiên, nó hiện được định nghĩa là một hàm trả về React.ReactNode, là một kiểu rộng hơn nhiều. Như các cách đánh máy trong React nói:

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

Đảm bảo rằng các loại không mong muốn được vô hiệu hóa bằng cách gói giá trị trả về vào React Fragment ( <></>):

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

Đây là những gì làm việc cho tôi:

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

Chỉnh sửa Tôi khuyên bạn nên sử dụng children: React.ReactNodethay thế ngay bây giờ.

bạn có thể khai báo thành phần của mình như sau:

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

Bạn có thể sử dụng ReactChildrenvà ReactChild:

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

interface AuxProps {
  children: ReactChild | ReactChildren;
}

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

export default Aux;

Từ trang TypeScript: https://github.com/Microsoft/TypeScript/issues/6471

Phương pháp được khuyến nghị là viết loại đạo cụ là {children ?: any}

Điều đó đã làm việc cho tôi. Nút con có thể là nhiều thứ khác nhau, vì vậy việc nhập rõ ràng có thể bỏ sót các trường hợp.

Có một cuộc thảo luận dài hơn về vấn đề tiếp theo tại đây: https://github.com/Microsoft/TypeScript/issues/13618 , nhưng mọi phương pháp vẫn hoạt động.

Kiểu trả về của thành phần hàm được giới hạn JSXElement | nulltrong TypeScript. Đây là một hạn chế về kiểu hiện tại, React thuần túy cho phép nhiều kiểu trả về hơn .

Đoạn mã trình diễn tối thiểu

Bạn có thể sử dụng xác nhận kiểu hoặc Phân đoạn làm giải pháp thay thế:

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

ReactNode

children: React.ReactNodecó thể là không tối ưu, nếu mục tiêu là có các loại mạnh cho Aux.

Hầu hết mọi thứ đều có thể được gán cho ReactNodekiểu hiện tại , tương đương với {} | undefined | null. Một loại an toàn hơn cho trường hợp của bạn có thể là:

interface AuxProps {
  children: ReactElement | ReactElement[]
}

Thí dụ:

Do Auxnhu cầu của các phần tử React children, chúng tôi đã vô tình thêm a stringvào nó. Sau đó, giải pháp trên sẽ lỗi ngược lại ReactNode- hãy xem các sân chơi được liên kết.

Đã nhập childrencũng hữu ích cho các đạo cụ không phải JSX, chẳng hạn như lệnh gọi lại Render Prop .

Bạn cũng có thể dùng React.PropsWithChildren<P> .

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

Cách chung để tìm bất kỳ loại nào là bằng ví dụ. Cái hay của cách đánh chữ là bạn có quyền truy cập vào tất cả các loại, miễn là bạn có@types/ tệp .

Để tự trả lời điều này, tôi chỉ nghĩ về một thành phần phản ứng sử dụng có childrenhỗ trợ. Điều đầu tiên nghĩ đến? Làm thế nào về một<div /> ?

Tất cả những gì bạn cần làm là mở vscode và tạo một .tsxtệp mới trong một dự án phản ứng với @types/react.

import React from 'react';

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

Di chuột qua chỗ dựa childrensẽ hiển thị cho bạn loại. Và bạn biết gì - Loại của nó là ReactNode(không cần ReactNode[]).

Sau đó, nếu bạn nhấp vào định nghĩa kiểu nó mang đến cho bạn thẳng đến định nghĩa của childrentừ DOMAttributesgiao diện.

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

Lưu ý: Quá trình này nên được sử dụng để tìm bất kỳ loại nào chưa biết! Tất cả chúng ở đó chỉ chờ bạn tìm thấy chúng :)

Là một loại có chứa trẻ em, tôi đang sử dụng:

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

Loại vùng chứa con này đủ chung để hỗ trợ tất cả các trường hợp khác nhau và cũng phù hợp với API ReactJS.

Vì vậy, ví dụ của bạn, nó sẽ giống như:

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

Những câu trả lời này dường như đã lỗi thời - React hiện đã được tích hợp sẵn PropsWithChildren<{}>. Nó được định nghĩa tương tự như một số câu trả lời đúng trên trang này:

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

Các thành phần React phải có một nút trình bao bọc duy nhất hoặc trả về một mảng các nút.

<Aux>...</Aux>Thành phần của bạn có hai nút divvà main.

Cố gắng quấn trẻ em của bạn trong một divtrong Auxthành phần.

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

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

export default aux;