đèo phản ứng thành phần như đạo cụ

Question

phép nói rằng tôi có:

import Statement from './Statement' 
import SchoolDetails from './SchoolDetails' 
import AuthorizedStaff from './AuthorizedStaff' 


const MultiTab =() => (
    <Tabs initialIndex={1} justify="start" className="tablisty"> 
    <Tab title="First Title" className="home"> 

     <Statement/> 
    </Tab> 
    <Tab title="Second Title" className="check"> 
     <SchoolDetails/> 
    </Tab> 
    <Tab title="Third Title" className="staff"> 
     <AuthorizedStaff/> 
    </Tab> 
    </Tabs> 
) 

Bên trong thành phần Tabs this.props đã thuộc tính

+Children[3] 
className="tablist" 
justify="start" 

trẻ em [0] (this.props.children) sẽ trông giống như

$$typeof: 
Symbol(react.element) 
_owner:ReactCompositeComponentWrapper 
_self:null 
_shadowChildren:Object 
_source:null 
_store:Object 
key:null 
props:Object 
ref:null 
type: Tab(props, context) 
__proto__ 
Object 

Trẻ em [0] .prop trông giống như

+Children (one element) 
className="home" 
justify="first title" 

đối tượng Cuối cùng trẻ em trông giống như (đây là những gì tôi muốn vượt qua):

$$typeof:Symbol(react.element) 
_owner:ReactCompositeComponentWrapper 
_self:null 
_shadowChildren:undefined 
_source:null 
_store: 
key:null 
props:Object 
__proto__:Object 
**type: function Statement()** 
ref:null 

Câu hỏi đặt ra là thế này, nếu tôi viết lại MultiTab như thế này

<Tabs initialIndex={1} justify="start" className="tablisty"> 
    <Tab title="First Title" className="home" pass={Statement}/> 


    <Tab title="Second Title" className="check" pass={SchoolDetails}/> 



    <Tab title="Third Title" className="staff" pass={AuthorizedStaff}/> 


</Tabs> 

Bên trong thành phần Tabs

this.props.children trông giống như trên.

children[0].props trông giống như

classname:"home" 
**pass: function Statement()** 
title: "First title" 

Tôi muốn pass tài sản để trông giống như. Ở trên chỉ in ra chức năng Statement.

$$typeof:Symbol(react.element) 
_owner:ReactCompositeComponentWrapper 
_self:null 
_shadowChildren:undefined 
_source:null 
_store: 
key:null 
props:Object 
__proto__:Object 
**type: function Statement()** 
ref:null 

Đây là câu hỏi kỳ lạ, nhưng câu chuyện dài tôi đang sử dụng thư viện và đây là những gì nó được đưa ra.

Answer 1

Sử dụng this.props.children là cách thành ngữ để vượt qua các thành phần khởi tạo một thành phần phản ứng

const Label = props => <span>{props.children}</span> 
const Tab = props => <div>{props.children}</div> 
const Page =() => <Tab><Label>Foo</Label></Tab> 

Khi bạn vượt qua một thành phần như một tham số trực tiếp, bạn vượt qua nó uninstantiated và nhanh chóng nó bằng cách lấy nó ra khỏi đạo cụ. Đây là một cách thành ngữ để chuyển các lớp thành phần, sau đó sẽ được các thành phần đi xuống (ví dụ: nếu thành phần sử dụng kiểu tùy chỉnh trên thẻ, nhưng nó muốn cho người tiêu dùng chọn xem thẻ đó là div hoặc span) :

const Label = props => <span>{props.children}</span> 
const Button = props => { 
    const Inner = props.inner; // Note: variable name _must_ start with a capital letter 
    return <button><Inner>Foo</Inner></button> 
} 
const Page =() => <Button inner={Label}/> 

Nếu những gì bạn muốn làm là để vượt qua một tham số trẻ em giống như là một chỗ dựa, bạn có thể làm điều đó:

const Label = props => <span>{props.content}</span> 
const Tab = props => <div>{props.content}</div> 
const Page =() => <Tab content={<Label content='Foo' />} /> 

Sau khi tất cả, tài sản trong Phản ứng chỉ là thường xuyên thuộc tính đối tượng JavaScript và có thể giữ bất kỳ giá trị nào - có thể là chuỗi, hàm hoặc đối tượng phức tạp.