如何向React组件添加错误显示

import React, { useState } from 'react';

function MyComponent() {
  const [error, setError] = useState(null);

  // 组件的其他代码

  return (
    <div>
      {/* 错误显示 */}
      {error && <div className="error">{error}</div>}
      
      {/* 组件的其他内容 */}
    </div>
  );
}

function handleButtonClick() {
  // 模拟一个错误
  const error = 'Something went wrong!';

  // 更新错误状态变量
  setError(error);
}

return (
  <div>
    {/* 错误显示 */}
    {error && <div className="error">{error}</div>}
    
    {/* 组件的其他内容 */}
  </div>
);

.error {
  color: red;
  font-weight: bold;
}