ReactJS nguyên cảo thành phần tinh khiết với trẻ em

Question

Tôi có một thành phần TSX đó là một container gói con của nó như thế này:

import * as React from "react"; 

interface IProps extends React.Props<Box> { 
} 

interface IState { 
} 

export class Box extends React.Component<IProps, IState> { 
    render() { 
     return (
      <div> 
       <h3>Check this out:</h3> 
       {this.props.children} 
      </div>); 
    } 
} 

Tôi cũng có một số thành phần tinh khiết, như thế này:

// ReSharper disable once InconsistentNaming - React components must start with a capital letter. 
export function LabelTest(props: { label: string }) { 
    return (
     <div style={{ display: "flex" }}> 
      <label style={{ flex: "1 0 0" }}>{props.label}</label> 
      <div style={{ width: "auto" }}> 
       This is a pure component. 
      </div> 
     </div>); 
} 

tôi không thể cho cuộc sống của tôi tìm ra cách để làm cho một thành phần container tinh khiết mặc dù. Việc kê khai trông ổn và cho thấy không có lỗi:

// ReSharper disable once InconsistentNaming - React components must start with a capital letter. 
export function LabelBox(props: { label: string, children: React.ReactNode }) { 
    return (
    <div style={{ display: "flex" }}> 
     <label style={{ flex: "1 0 0" }}>{props.label}</label> 
     <div style={{ width: "auto" }}> 
     {props.children} 
     </div> 
    </div>); 
} 

children là React.ReactNode bởi vì đó là nó là gì trong React.Props<X>.

Khi sử dụng tôi nhận được TS2324 Thuộc tính 'trẻ em' bị thiếu trong loại 'IntrinsicAttributes & {label: string; trẻ em: ReactElement | chuỗi | số | {} | (REAC ....

// ReSharper disable once InconsistentNaming - React components must start with a capital letter. 
export function LabelNumberInput(props: { label: string, value: number }) { 
    return (
    <LabelBox label={props.label}> 
     <input type="number" value={props.value} /> 
    </LabelBox>); 
} 

Tôi không thể nói điều gì đó giống như đoạn xuống dưới đây vì nó sẽ nói Không thể tìm thấy biểu tượng 'LabelBox' trong mô-đun bên ngoài _.tsx (đó là các tập tin trong đó tất cả của mã này là). không quan trọng nếu tôi đặt chức năng hoặc giao diện đầu tiên, nhưng nó cảm thấy sai tổng thể anyway.

interface ILabelBoxProps extends React.Props<LabelBox> { label: string } 
export function LabelBox(props: ILabelBoxProps) { 
    return (
    <div style={{ display: "flex" }}> 
     <label style={{ flex: "1 0 0" }}>{props.label}</label> 
     <div style={{ width: "auto" }}> 
     {props.children} 
     </div> 
    </div>); 
} 

gì đúng cách để làm cho một nguyên cảo tinh khiết Phản ứng thành phần có khả năng chụp trẻ em chỉ giống như một thành phần lớp học đầy đủ? Điều này có thể không? Tôi không nghĩ rằng nó không nên được, nó vẫn là một com không quốc tịch ponent và children chỉ là một loại đặc biệt của props, thực sự vấn đề thực sự có vẻ là các dụng cụ ở đây (Visual Studio) mà không bản đồ các nút nội dung TSX để các children prop.

Answer 1

gì đúng cách để làm cho một nguyên cảo tinh khiết Phản ứng thành phần có khả năng chụp trẻ em giống như một thành phần lớp đầy đủ sẽ

mẫu:

interface PrimitiveProps extends React.HTMLProps<HTMLDivElement>{ 
    myAdditionalProp:any; 
}; 

export const Content = (allProps: PrimitiveProps) => { 
    const {myAdditionalProp, ...props} = allProps; 
    return (
     <div data-comment="Content" {...props}/>; 
    ); 
}; 

Tất nhiên bạn có thể tự do làm bất cứ điều gì với myAdditionalProp và đưa vào đạo cụ thêm vào PrimitiveProps nếu bạn muốn. Chỉ cần chắc chắn để loại bỏ chúng từ allProps trước khi vượt qua nó. Lưu ý rằng children được chuyển như một phần của allProps và do đó props.

Answer 2

Dưới đây là ví dụ hoàn chỉnh:

interface PaginationItemProps extends React.HTMLProps<HTMLDivElement> { 
} 

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

class Pagination extends React.Component<PaginationProps> { 
    render() { 
    return <div>   
     <PaginationItem>CHILDREN RENDER</PaginationItem> 
    </div> 
    } 
}