ReactJS：如何在try-catch代码块中渲染组件

问题核心是：事件处理函数里的JSX不会自动触发React渲染，必须通过状态管理来控制组件的显示逻辑。

解决步骤 #

1. 引入useState钩子维护一个状态，标记是否需要显示错误组件
2. 在catch块中更新状态为true
3. 在组件的return语句中根据状态判断是否渲染Example组件

修改后的App.js代码 #

import { useState } from 'react';
import Example from "./filename";

function App() {
  // 定义状态控制错误组件的显示
  const [showError, setShowError] = useState(false);

  function clickFail() {
    try {
      console.log(window.device.version);
    } catch (e) {
      // 出错时更新状态，触发组件重渲染
      setShowError(true);
    }
  }

  return (
    <div className="App">
      <button onClick={clickFail}>failed</button>
      {/* 根据状态条件渲染组件 */}
      {showError && <Example />}
    </div>
  );
}

export default App;

原写法无效的原因 #

React的渲染流程由组件的返回值驱动，事件处理函数里直接写<Example />只是创建了一个React元素对象，但没有将其加入到渲染树中，自然不会显示。通过状态更新触发组件重渲染后，return里的条件判断会生效，将Example组件挂载到DOM中。

扩展：支持多次触发 #

如果需要每次点击按钮都能重新触发错误显示逻辑，可以在点击时先重置状态：

function clickFail() {
  setShowError(false); // 点击时重置状态
  try {
    console.log(window.device.version);
  } catch (e) {
    setShowError(true);
  }
}

内容的提问来源于stack exchange，提问作者sj002