Пропустите компонент реакции в качестве реквизита

Допустим, у меня есть:

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>
)

Внутри компонента вкладки this.props есть свойства

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

Дети [0] (this.props.children) будут выглядеть как

$$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

Дети [0].props выглядит как

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

Наконец, объект Children выглядит (это то, что я хочу передать):

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

Вопрос в том, что если я переписываю MultiTab, как это,

<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>

Внутри компонента вкладки

this.props.children выглядит так же, как указано выше.

children[0].props выглядит как

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

Я хочу, чтобы свойство pass выглядело. Выше всего распечатывается функция 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

Это странный вопрос, но длинная история я использую библиотеку, и это то, к чему это сводится.

Ответ 1

Использование this.props.children - это идиоматический способ передачи инстанцированных компонентов в реагирующий компонент

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

Когда вы передаете компонент как параметр напрямую, вы передаете его без предварительного уведомления и создаете его, извлекая его из реквизита. Это идиоматический способ передачи классов компонентов, которые затем будут создаваться компонентами по дереву (например, если компонент использует пользовательские стили в теге, но он хочет, чтобы потребитель выбирал, является ли этот тег div или 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}/>

Если вы хотите передать дочерний параметр в качестве опоры, вы можете сделать это:

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

В конце концов, свойства в React - это просто обычные свойства объекта JavaScript и могут содержать любое значение - будь то строка, функция или сложный объект.