如何根据React JS中的其他组件创建Dropdown组件？

Question

我想创建一个Dropdown组件：<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>作为处理？

我问，因为看起来Dropdown组件有动态内容，但操作是相同的。

感谢

Answer 1

如果我理解正确的话，你正在寻找props.children。这用于将组件的子元素传递给组件。

例如：

<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