Làm thế nào để sử dụng trẻ em với React Stateless Functional Component trong TypeScript?

Question

Sử dụng nguyên cảo với Phản ứng chúng ta không còn phải mở rộng React.Props để cho trình biên dịch biết rằng tất cả các phản ứng đạo cụ thành phần có thể có con:

interface MyProps { } 

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

Tuy nhiên, nó dường như không phải là trường hợp cho stateless chức năng thành phần:

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

phát ra lỗi biên dịch:

Error:(102, 17) TS2339: Property 'children' does not exist on type 'MyProps'.

tôi đoán đây là becau Có thực sự không có cách nào cho trình biên dịch biết rằng một hàm vani sẽ được đưa ra children trong đối số đạo cụ.

Vì vậy, câu hỏi là làm thế nào chúng ta nên sử dụng trẻ em trong một thành phần chức năng không quốc tịch trong TypeScript?

Tôi có thể quay lại theo cách cũ của MyProps extends React.Props, nhưng giao diện Props là marked as deprecated và các thành phần không trạng thái không có hoặc hỗ trợ Props.ref như tôi đã hiểu.

Vì vậy, tôi có thể xác định children prop bằng tay:

interface MyProps { 
    children?: React.ReactNode; 
} 

Đầu tiên: là ReactNode đúng loại?

Thứ hai: Tôi phải viết trẻ như tùy chọn (?) hoặc nếu không người tiêu dùng sẽ nghĩ rằng children được coi là một thuộc tính của các thành phần (<MyStatelessComponent children={} />), và nâng cao một lỗi nếu không được cung cấp với một giá trị.

Có vẻ như tôi đang thiếu thứ gì đó. Bất cứ ai có thể cung cấp một số rõ ràng về việc ví dụ cuối cùng của tôi là cách để sử dụng các thành phần chức năng không quốc tịch với trẻ em trong React?

Answer 1

Còn bây giờ, bạn có thể sử dụng các loại React.StatelessComponent<>, như:

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

Những gì tôi đã thêm có được thiết lập các kiểu trả về của các thành phần để React.StatelessComponent loại.

Đối với một thành phần với đạo cụ tùy chỉnh của riêng bạn (như MyProps giao diện):

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

Bây giờ, props đã có những children bất động sản cũng như những từ giao diện MyProps.

Tôi đã kiểm tra này trong phiên bản nguyên cảo 2.0.7

Ngoài ra, bạn có thể sử dụng React.SFC thay vì React.StatelessComponent cho ngắn gọn.