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" 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 错误；
- 同时，该赋值在组件渲染阶段就已执行，而非点击时，完全违背交互意图。
✅ 正确写法：使用箭头函数包裹副作用逻辑（推荐用于简单操作）：
<button onclick="{()"> window.location.href = 'https://github.com/'}
className="btn btn-github"
>
Visit GitHub
</button>
⚠️ 注意事项：
- 使用 window.location.href（而非 window.href）——后者不存在，会导致静默失败或 undefined 赋值；
- 若需新窗口打开，建议使用 window.open('https://github.com/', '_blank') 并注意浏览器弹窗拦截策略；
- 对于复杂逻辑或复用场景，推荐提取为具名函数，提升可读性与可测试性：
function handleGithubClick() {
window.location.href = 'https://github.com/';
}
// JSX 中使用
<button onclick="{handleGithubClick}" classname="btn btn-github">
Visit GitHub
</button>
? 补充说明：
React 的事件系统基于合成事件（SyntheticEvent），所有原生事件属性（如 onClick, onChange）均要求传入函数。切勿在花括号中直接写表达式、语句或调用无返回值函数（如 console.log() 单独使用虽不报错但易引发误解）。始终确保 {} 内是一个函数定义（() => ... 或 function name() {...}），而非函数调用（onClick={doSomething()} ❌）或值（onClick={'string'} ❌）。
遵循这一原则，即可彻底规避 onclick 类型错误，并构建健壮、符合 React 惯例的交互逻辑。
