React按钮切换Div可见性：未使用Error Boundaries报错排查

算力阿峰

2026-8-5

你的代码问题及修正方案

首先明确：「Error Boundaries未使用」的提示并非核心错误，它是因为代码运行时抛出了其他错误，React才提示你可以用Error Boundaries捕获错误。真正的问题出在以下几个地方：

1. 函数组件错误使用`this`

React函数组件没有实例，不能用this访问属性。你在onClick里写toggleElement(this.id)，这里的this是undefined，会直接抛出错误。

另外，onClick如果直接写函数调用（比如onClick={toggleElement(xxx)}），会导致组件渲染时就立即执行该函数，而非点击时执行。正确写法是用箭头函数包裹：

onClick={() => toggleElement(clickedElm)}

2. 直接操作DOM不符合React范式

React的核心是用状态（state）控制UI，而非像原生JS那样直接获取DOM元素修改样式。你应该用useState钩子管理内容的显示状态，替代document.getElementById操作DOM的写法。

3. JSX语法错误

React中需用className代替原生HTML的class，按钮上的class="collapsible"要改成className="collapsible"
你的JSX未闭合，return中的<div className="faq-item">和组件本身都缺少闭合标签

修正后的完整代码

import { useState } from 'react';

function FAQ(props) {
  // 用state控制内容显示隐藏
  const [isOpen, setIsOpen] = useState(false);

  const toggleContent = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="faq-item">
      <button 
        type="button" 
        className="collapsible" 
        onClick={toggleContent}
      >
        {props.question}
      </button>
      {/* 根据isOpen状态控制display */}
      <div 
        className="content" 
        style={{ display: isOpen ? 'block' : 'none' }}
      >
        <p>{props.answer}</p>
      </div>
    </div>
  );
}