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

在 DialogBox 组件的渲染方法中：

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

这将呈现：

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

How to create Dropdown component depending on another components in React JS?