React JSX点击事件代码报错求助：TypeScript错误码1005

错误分析 #

你代码里的语法错误主要有以下几点：

1. 组件函数体写法错误：箭头组件用()包裹时是隐式返回JSX，无法在内部声明变量/函数，必须改用{}作为函数体，才能在里面定义点击事件函数。
2. 点击事件函数语法错误：
   • 箭头函数用()时是隐式返回，不能包含变量声明和return语句，要换成{}包裹函数体。
   • 变量声明结尾误用逗号，，应该用分号;。
3. 逻辑实现错误：点击事件直接返回JSX是无效的，React是状态驱动框架，需要通过状态变量控制内容的显示。

修正后的代码 #

import { useState } from 'react';

export const App = () => {
  // 用状态变量控制消息的显示状态
  const [showMessage, setShowMessage] = useState(false);
  const message = 'Ciao come stai?';

  const click = () => {
    // 点击按钮切换状态，触发组件重新渲染
    setShowMessage(!showMessage);
  };

  return (
    <div>
      <h1>Welcome to Meteor!</h1>
      <button onClick={click}>Clicca</button>
      {/* 根据状态决定是否渲染消息 */}
      {showMessage && <b>{message}</b>}
    </div>
  );
};

关键修正说明 #

• 将组件外层的()改为{}，允许在内部声明状态变量和点击函数。
• 使用useState钩子创建状态变量showMessage，通过切换状态控制消息的显示与隐藏。
• 点击函数click的作用是修改状态，而非直接返回JSX，React会根据状态变化自动重新渲染组件。
• 移除了错误的逗号，修正了箭头函数的语法格式。

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