具有嵌套子项的动态嵌套手风琴

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;
}

已添加codesandbox

我是新来的反应，任何帮助表示赞赏

Answer 1

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

在你的 Accordion 组件中替换这个：

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

有了这个：

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

Answer 2

您可以使用children，而不是使用dangerouslySetInnerHTML，因为您需要的是React.ReactChildren 的传播。那只是从 props 调用 {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>

这是您的密码箱的forked solution。

此外，作为条件场景，您可以使用三元运算符，而不是将 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>
      )}
    </>
  );
};