在 React 中为 FAQ 切换获取“TypeError: cannot read classList of undefined”

Question

如何更改此 JS 使其在 React 组件内工作？ 当我向 span 按钮添加 onClick 处理程序时，我得到“无法读取未定义的属性 classList”。 这是从非反应项目中取出的 JS，所以我知道我可能没有将其作为最佳实践，但需要指导才能使其发挥作用。

这是我的代码。

 import React from "react" const Faq = () => { const toggleFAQ = function(question) { if( question.parentElement.classList.contains('is-opened') ) { question.parentElement.classList.remove('is-opened'); } else { question.parentElement.classList.add('is-opened'); } } if( document.querySelector('.faq') !== null ) { const questions = Array.from( document.getElementsByClassName('faq__question') ); questions[0].parentElement.classList.add('is-opened'); questions.forEach((question) => { question.addEventListener('click', (e) => toggleFAQ(question)); }) } return ( <> <section className="faq"> <div className="faq__inner"> <h2 className="faq__title">Frequently Asked Questions</h2> <ul className="faq__list"> <li className="faq__item"> <h3 className="faq__question"> How do I make this work? <span className="faq__question-btn" onClick={toggleFAQ}></span> </h3> <article className="faq__answer is-opened"> <div className="faq__answer-inner is-opened"> <p> Lorem Ipsum </p> </div> </article> </li> <li className="faq__item"> <h3 className="faq__question"> Help me, Lord? <span className="faq__question-btn"></span> </h3> <article className="faq__answer"> <div className="faq__answer-inner"> <p> You suck at JS </p> </div> </article> </li> <li className="faq__item"> <h3 className="faq__question"> How does this work. Help? <span className="faq__question-btn"></span> </h3> <article className="faq__answer"> <div className="faq__answer-inner"> <p> Lorem Ipsum. </p> </div> </article> </li> <li className="faq__item"> <h3 className="faq__question"> Lorem Ipsum? <span className="faq__question-btn"></span> </h3> <article className="faq__answer"> <div className="faq__answer-inner"> <p> Lorem ipsum </p> </div> </article> </li> <li className="faq__item"> <h3 className="faq__question"> Lorem Ipsum? <span className="faq__question-btn"></span> </h3> <article className="faq__answer"> <div className="faq__answer-inner"> <p> Lorem Ipsum </p> </div> </article> </li> </ul> </div> </section> </> ) } export default Faq

提前致谢！

Answer 1

在 React 中，您不会像在 vanilla JS 中那样直接操作 DOM 和 classList。 相反，最好存储一些状态，操纵状态，然后根据数据呈现您的视图。

所以，我可能会做这样的事情：

import React, { useState } from "react"

const Faq = () => {
  const [questions, setQuestions] = useState([
    { id: 1, title: 'How do I make this work?', content: 'Lorem Ipsum', isOpen: true },
    { id: 2, title: 'Help me, Lord?', content: 'You suck at JS', isOpen: false },
    { id: 3, title: 'How does this work. Help?', content: 'Lorem Ipsum.', isOpen: false },
    { id: 4, title: 'Lorem Ipsum?', content: 'Lorem ipsum', isOpen: false },
    { id: 5, title: 'Lorem Ipsum?', content: 'Lorem ipsum', isOpen: false },
  ])

  const toggleFAQ = (questionId) => () => {
    const newQuestions = [
      ...questions,
    ]
    const questionIndex = questions.findIndex(q => q.id === questionId)
    newQuestions[questionIndex].isOpen = !newQuestions[questionIndex].isOpen
    setQuestions(newQuestions)
  }
 
  return (
    <section className="faq">
      <div className="faq__inner">
        <h2 className="faq__title">Frequently Asked Questions</h2>
        <ul className="faq__list">
          {questions.map(q => (
            <li key={q.id} className="faq__item">
              <h3 className="faq__question">
                {q.title}
                <span className="faq__question-btn" onClick={toggleFAQ(q.id)}></span>
              </h3>
              <article className={`faq__answer ${q.isOpen ? 'is-opened' : ''}`}>
                <div className={`faq__answer-inner ${q.isOpen ? 'is-opened' : ''}`}>
                  <p>
                    {q.content}
                  </p>
                </div>
              </article>
            </li>
          ))}
        </ul>
      </div>
    </section>
  )
}

export default Faq