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

Question

我是个新手，所以请友善。

我有一个显示搜索术语的手风琴，我试图将一个状态传递给这个手风琴中的每个孩子，但我似乎无法在单击孩子时切换状态。

到目前为止，我有了我的手风琴（我已经删除了它周围的代码）：

const [isOpen, setIsOpen] = useState(false)

 const toggleAccordion = () => {
     setIsOpen(!isOpen)   
 }

return (
  <div className='grid'>
    {enableSearch && searchComponents}
    {accordionData.length > 0
      ? (
        <section className='accordion' data-kontent-item-id={id}>
          {title &&
            <h2 className='accordion__title'>{title}</h2>}
          {accordionData.map(
            (item, key) =>
              item.title && (
                <AccordionItem
                  key={key}
                  title={item.title}
                  text={item.text}
                  itemId={item.id}
                  onClick={toggleAccordion}
                  onKeyDown={handleKeyDown}
                  isOpen={isOpen}
               />
              )
          )}
        </section>
        )
      : (
          enableSearch && (
            <div
              className='mt-8'
              dangerouslySetInnerHTML={{ __html: noResultsText }}
            />
          )
        )}
  </div>
)

还有我的手风琴项目：

const AccordionItem = ({ 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>
      <div
        className='accordion__item-content js-accordion__item-content'
        ref={contentRef}
      >
        <div className='accordion__item-content-wrapper' dangerouslySetInnerHTML={{ __html: text }} />
      </div>
    </div>
  )
}

我希望在单击手风琴项目时更改 isOpen 状态。我没有收到任何错误。

Answer 1

对状态设置器函数使用回调语法：

const toggleAccordion = () => {
  setIsOpen((isCurrentlyOpen) => !isCurrentlyOpen); 
}

永远不建议直接在 setter 内部访问状态值。

Answer 2

AccordionItem

应该将

onClick

属性传递给实际的 DOMNode，例如

button

元素，以便单击它时可以切换状态。

示例：

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