如何根据React JS中的其他组件创建Dropdown组件?
问题描述:
我想创建一个Dropdown组件:<Dropdown />
。如何根据React JS中的其他组件创建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组件有动态内容,但操作是相同的。
感谢
答
如果我理解正确的话,你正在寻找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
比ks男人!正是我需要的。 – Steffi