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>作为处理程序？

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

由于

Answer 1

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

例如：

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

在DialogBox组件的render方法中：

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

这将呈现：

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