在按鈕單擊時反應切換 div 可見性

Question

我想在單擊按鈕時切換 div 內容的可見性。 為此，我使用 UseId 鈎子如下

function toggleElement(elm_id) {
  var el = document.getElementById(elm_id).nextElementSibling;
      if (el.style.display === "block") {
        el.style.display = "none";
      } else {
        el.style.display = "block";
      }
   
}
function FAQ(props) {
  const clickedElm = useId();
  return (
    <div className="faq-item">
      <button type="button" id = {clickedElm} class="collapsible" onClick={toggleElement(this.id)} >
        {props.question}
      </button>
      <div className="content">
        <p>{props.answer}</p>
      </div>

上面的代碼顯示Error Boundaries未使用錯誤。 我是 React 的初學者。 我不明白那是什么。 代碼哪里出錯了？

Answer 1

像你在這里做的那樣直接觸摸 DOM 是不鼓勵的：

 if (el.style.display === "block") {
        el.style.display = "none";
      } else {
        el.style.display = "block";
      }

因為 React 有自己的內部表示來確定更新什么不更新等等。

相反，做你想要的事情的反應方式是這樣的：

import React from 'react';
import './style.css';

export default function App() {
  let [show, setShow] = React.useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setShow(!show);
        }}
      >
        Click
      </button>
      {show && <div>Hi</div>}
    </div>
  );
}

Answer 2

我已經解決了這個問題。 請檢查以下代碼：-

    function toggleElement(elm_id) {
        var el = elm_id.currentTarget.nextElementSibling;
            if (el.style.display === "block") {
              el.style.display = "none";
            } else {
              el.style.display = "block";
            }
    }
    function FAQ(props) {
        return (
           <div className="faq-item">
              <button type="button" id='btntest' class="collapsible" onClick={toggleElement}>
                {props.question}
              </button>
              <div className="content">
                 <p>{props.answer}</p>
              </div>
           </div>
        )
    }

這里不需要使用 UseId 掛鈎，我剛剛更新了你的一些代碼行。 試試這個，讓我知道它是否適合你。