如何根據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