动态嵌套手风琴与嵌套的儿童

Question

我正在尝试构建一个可重复使用的手风琴，我能够创建一个具有一个级别的手风琴，但在这里我只能使用嵌套手风琴。

到目前为止我尝试了什么

App.js

import "./styles.css";
import Accordion from "./Accordion";
import LIST from './Constants';

const listMaker = (item) => {
let faqItem;
if (item.children.length === 0) {
faqItem = (
<>
<Accordion title={item.name}></Accordion> <hr />
</>
);
} else {
let faqItemChildren = item.children.map((item) => {
let faqItem = listMaker(item);
return (
<>
${faqItem}
<hr />
</>
);
});
faqItem = <Accordion title={item.name}>{faqItemChildren}</Accordion>;
}
return faqItem;
};
let listItems = LIST.map((item) => {
let menuItem = listMaker(item);
return menuItem;
});
export default function App() {
return listItems;
}

已添加代码沙盒

我是新来的反应，任何帮助都感谢

Answer 1

不使用dangerouslySetInnerHTML，您可以使用children，因为您需要的是React.ReactChildren的扩展。这将只是从道具调用{children}，而不是dangerouslySetInnerHTML

<div className="accordion__section">
<button className={`accordion ${setActive}`} onClick={toggleAccordion}>
<p className="accordion__title">{title}</p>
<Chevron className={`${setRotate}`} width={10} fill={"#777"} />
</button>
<div
ref={content}
style={{ maxHeight: `${setHeight}` }}
className="accordion__content"
>
{children}
</div>
</div>

这是一个代码沙盒的分叉解决方案。

此外，您可以使用三元运算符，而不是将DOM设置为变量(作为条件场景(，这有助于提高可读性。

const listMaker = (item) => {
return (
<>
{item.children.length === 0 ? (
<Accordion title={item.name} />
) : (
<Accordion title={item.name}>
{item.children.map((childItem) => {
return listMaker(childItem);
})}
</Accordion>
)}
</>
);
};

Answer 2

dangerouslySetInnerHTML用于字符串。你不应该给它一个组件数组，但无论如何你都不会发送任何名为content的道具。我想你指的是children道具。只渲染子项，而不使用dangerouslySetInnerHTML

在您的Accordion组件中替换此：

<div
className="accordion__text"
dangerouslySetInnerHTML={{ __html: props.content }}
/>

有了这个：

<div className="accordion__text"> 
{ props.children }
</div>