如何在 React 中正确使用 onClick 事件避免类型错误

React 中 onClick 期望接收一个函数，若传入字符串或直接执行表达式（如 window.href=...）会触发“Expected onclick listener to be a function”错误；正确做法是传递箭头函数或具名函数包裹逻辑。 react 中 `onclick` 期望接收一个函数，若传入字符串或直接执行表达式（如 `window.href=...`）会触发“expected `onclick` listener to be a function”错误；正确做法是传递箭头函数或具名函数包裹逻辑。在 React 中，事件处理器（如 onClick）必须是函数引用，而非函数调用结果或原始值。常见错误是将赋值语句、跳转逻辑等直接写在花括号内，导致 JSX 在渲染时立即执行，返回 undefined 或字符串，从而违反 React 的事件监听器类型约束。例如，以下写法是错误的：<button onClick={window.href = 'https://github.com/'} className="btn btn-github"> Visit GitHub</button>这段代码的问题在于：window.href = '...' 是一条赋值语句，执行后返回字符串 'https://github.com/'；React 将该字符串作为 onClick 处理器，但框架只接受函数类型，因此抛出 Expected onclick listener to be a function, instead got a value of string type 错误；同时，该赋值在组件渲染阶段就已执行，而非点击时，完全违背交互意图。? 正确写法：使用箭头函数包裹副作用逻辑（推荐用于简单操作）： 蝉妈妈AI 电商人专属的AI营销助手