React JSの別のコンポーネントに応じてドロップダウンコンポーネントを作成する方法は？

Question

ドロップダウンコンポーネント：<Dropdown />を作成します。

こののドロップダウンでは、ハンドラとコンテンツを表示したいと思います。このドロップダウン内には常に2つの要素があります。

このハンドラは、シンプルなHTML、文字列またはコンポーネントです。

表示する内容は、単純なHTML、文字列またはコンポーネントです。

どうすればいいですか？Dropdown？私はどこでも私のアプリでそれを再利用したいと思います。

私はこれを念頭に置いています。

<div id="Page2"> 
    <Dropdown> 
    <Avatar /> 
    <Menu> 
     <li>Settings</li> 
     <li>Logout</li> 
    </Menu> 
    </Dropdown> 
</div> 

しかし、それは、このことができます

<div id="Page3"> 
    <Dropdown> 
    <span>Click to show the content</span> 
    <div>Hello World</div> 
    </Dropdown> 
</div> 

コンポーネント：

class Dropdown extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
} 

どのようにハンドラとしてAvatarか<span>Click to show the content</span>を行うことができますか？

ドロップダウンコンポーネントには動的コンテンツが含まれていますが、操作は同じであると思われます。私が正しくあなたを理解していれば

おかげ

Answer 1

は、あなたがprops.childrenを探しています。これは、コンポーネントの子要素をコンポーネントに渡すために使用されます。例えば

：ダイアログボックスコンポーネントのrenderメソッドで

<DialogBox> 
    <div>Title</div> 
</DialogBox> 

：

return (
    <div class="dialog-box"> 
    {this.props.children} 
    </div> 
); 

これはレンダリングされます：

<div class="dialog-box"> 
    <div>Title</div> 
</div> 

ここでそれについて詳しく読む：https://facebook.github.io/react/docs/composition-vs-inheritance.html#containment