Javascript 将状态向下传递给映射的子元素

AccordionItem应该像button元素一样将onClick prop传递给实际的DOMNode，这样当它被点击时，它就可以切换状态.

示例:

const AccordionItem = ({
  onClick,
  title,
  text,
  itemId,
  isOpen
}) => {
  const contentRef = useRef(null);

  return (
    <div className={`accordion__item ${isOpen ? 'accordion__item-label--expanded' : ''}`} data-kontent-item-id={itemId}>
      <div
        className='accordion__item-label js-accordion__item-label'
        tabIndex={0}
      >
      </div>

      <button type="button" onClick={onClick}>
        Toggle Accordion
      </button>

      <div
        className='accordion__item-content js-accordion__item-content'
        ref={contentRef}
      >
        <div className='accordion__item-content-wrapper' dangerouslySetInnerHTML={{ __html: text }} />
      </div>
    </div>
  )
}

您将遇到的下一个问题是，您正在使用一个isOpen状态，该状态被传递给所有手风琴组件，并且它们都将被切换到一起.我的建议是将isOpen从一个布尔值改为一个可空的字符串/数字类型，它与你想要打开的特定手风琴相一致，或者如果你想一次打开多个手风琴，就使用一个对象.

示例:

单开手风琴:

const [isOpen, setIsOpen] = useState(null);

const toggleAccordion = (id) => {
  setIsOpen(isOpen => isOpen === id ? null : id);
}

{accordionData
  .filter(item => item.title)
  .map((item) => (
    <AccordionItem
      key={item.id}
      title={item.title}
      text={item.text}
      itemId={item.id}
      onClick={() => toggleAccordion(item.id)}
      onKeyDown={handleKeyDown}
      isOpen={isOpen === item.id}
    />
  )
)}

多开口手风琴:

const [isOpen, setIsOpen] = useState({});

const toggleAccordion = (id) => {
  setIsOpen(isOpen => ({
    ...isOpen,
    [id]: !isOpen[id],

  }));
}

{accordionData
  .filter(item => item.title)
  .map((item) => (
    <AccordionItem
      key={item.id}
      title={item.title}
      text={item.text}
      itemId={item.id}
      onClick={() => toggleAccordion(item.id)}
      onKeyDown={handleKeyDown}
      isOpen={isOpen[item.id]}
    />
  )
)}