嘿，我正在做一个副项目，我想开发一个反应组件，它可以在顶部栏上用文本和两个按钮呈现细节，在底部，一个层次结构风格类似于菜单流程图。单击加号时每个菜单选项将进一步展开，单击减号时将折叠。
我是reactjs的初学者，不知道怎么渲染这样的组件，你能帮帮我吗？
如果您有任何问题，请在下方评论并提前致谢。
【问题讨论】：
标签： javascript html css reactjs
只要有 children 属性并且 isOpen 为真，您就可以使用递归方法，通过使用 map 方法在组件内渲染子（嵌套）元素。
数据结构是一个对象数组，其中每个对象都有title、text和children属性，这是一个相同结构的数组。这适用于任何深度级别的数据。
const data = [{"title":"item-1","text":"Lorem ipsum dolor sit amet.","children":[{"title":"item-1-1","text":"Lorem ipsum dolor sit amet.","children":[{"title":"item-1-1-1","text":"Lorem ipsum dolor sit amet."},{"title":"item-1-1-2","text":"Lorem ipsum dolor sit amet."}]},{"title":"item-1-2","text":"Lorem ipsum dolor sit amet."}]},{"title":"Item 2","text":"Lorem ipsum dolor sit amet.","children":[{"title":"Item 4","text":"Lorem ipsum dolor sit amet."}]}]
const { useState } = React;
const App = ({ items }) => (
items.map((item, i) => (
<Item {...item} key={i}/>
))
)
const ItemHeader = ({ title, isOpen, setIsOpen }) => (
<div className="item-header">
<span>{title}</span>
<button onClick={() => setIsOpen(!isOpen)}>{isOpen ? '-' : '+'}</button>
</div>
)
const ItemBody = ({ text, children, isOpen }) => (
<div className={`item-body ${isOpen ? 'show' : 'hide'}`}>
<p>{text}</p>
</div>
)
const Item = ({ title, text, children }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="item">
<div class="item-content">
<ItemHeader
title={title}
isOpen={isOpen}
setIsOpen={setIsOpen}/>
<ItemBody
isOpen={isOpen}
text={text}
children={children}/>
</div>
<div class="item-children">
{children && isOpen && children.map((item, i) => <Item {...item} key={i}/>)}
</div>
</div>
)
}
ReactDOM.render(
<App items={data}/>,
document.querySelector('#root')
).item {
color: white;
font-size: 14px;
margin-bottom: 10px;
}
.item-content {
padding: 5px 10px;
border-radius: 5px;
background: #252525;
margin-bottom: 10px;
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.item-header button {
cursor: pointer;
}
.item-body {
display: flex;
flex-direction: column;
}
.hide {
display: none;
}
p {
margin: 5px 0
}
.item-children {
margin-left: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>【讨论】：
免责声明。 当人们在 cmets 中问“到目前为止您尝试过什么？”时，他们只是帮助您解决某些问题，而不是“为您制作”。在盲目询问之前，请务必尝试一下。
您不需要库来制作它（根据您当前版本的问题）。您需要做的就是实现组件的复合模式。很简单的例子：
export class FlowItem extends React.Component {
render() {
const {header, children} = this.props;
return (
<div>
Ping from {header}
<div style={{marginLeft: '20px'}}>
{children}
<div/>
<div/>
);
}
}
下面是示例的用法。
export class Content extends React.Component {
render() {
return (
<div
<FlowItem
header={"Very Top 1"}>
<FlowItem
header={"Parent 1"}>
<FlowItem/>
<FlowItem/>
<FlowItem
header={"Very Top 2"}>
<FlowItem
header={"Parent 1"}>
<FlowItem/>
<FlowItem
header={"Parent 2"}>
<FlowItem header={"Child 1"}/>
<FlowItem header={"Child 2"}/>
<FlowItem/>
<FlowItem
header={"Parent 3"}>
<FlowItem/>
<FlowItem/>
<div/>
);
}
}
另一个简单的示例，如果您想与数组中的真实对象一起使用。我认为这是您的问题：
export class Content extends React.Component {
render() {
const root = {
header: "Root 1",
children: [
{
header: "Parent 1",
children: [
{
header: "Child 1",
children: [
{
header: "Inner 1",
children: null
}
]
},
{
header: "Child 2",
children: null
},
{
header: "Child 3",
children: null
}
]
},
{
header: "Parent 2",
children: [
{
header: "Child 1",
children: null
},
{
header: "Child 2",
children: null
}
]
},
]};
return (
<div>
{this.getItemView(root)}
<div/>
);
}
getItemView = (node) => {
return (
<FlowItem
header={node.header}>
{node.children ?
node.children.map((obj, idx) => {
return (this.getItemView(obj));
}) : <div/>}
<FlowItem/>
);
};
}
【讨论】：
PURE CSS 和 JS 也可以做到这一点，检查它并根据需要扩展它。
【讨论】：