[解決済み] reactのコンポーネントをpropsとして渡す

質問

例えば、こんな感じです。

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

Tabsコンポーネントの内部です。 this.props はプロパティを持ちます。

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

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

Children[0].propsは以下のようになります。

+Children (one element)
className="home"
title="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>;

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

これは奇妙な質問ですが、長い話私はライブラリを使っていて、これはそれに起因するものです。

どのように解決するのですか？

使用方法 this.props.children は、インスタンス化されたコンポーネントをリアクトコンポーネントに渡すためのイディオム的な方法です。

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

コンポーネントを直接パラメータとして渡す場合、インスタンス化されていない状態で渡し、propsから取得することでインスタンス化します。これは、ツリー下のコンポーネントによってインスタンス化されるコンポーネントクラスを渡す慣用的な方法です（例えば、コンポーネントがタグにカスタムスタイルを使用していて、消費者がそのタグが 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}/>

やりたいことがpropとしてchildrenのようなパラメータを渡すことであれば、それは可能です。

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

結局のところ、Reactのプロパティは通常のJavaScriptオブジェクトプロパティであり、文字列、関数、複雑なオブジェクトなど、どんな値でも保持することができるのです。