React 中 onClick 期望接收一个函数，若直接写 onClick={window.href='...'} 会立即执行赋值并返回字符串，导致类型错误；正确做法是传入箭头函数或命名函数来延迟执行。
react 中 `onclick` 期望接收一个函数，若直接写 `onclick={window.href='...'}` 会立即执行赋值并返回字符串，导致类型错误；正确做法是传入箭头函数或命名函数来延迟执行。
在 React 中，事件处理函数（如 onClick）必须是函数引用，而非函数调用结果或任意值。常见错误如以下代码：
<button onclick="{window.location.href" classname="btn btn-github">
Visit GitHub
</button>
这段代码会在组件渲染时立即执行 window.location.href = '...'，将其赋值为字符串 'https://github.com/'，而 onClick 实际接收到的是该字符串值（string 类型），违反了 React 的事件处理器类型约束，因此控制台报错：
Expected onclick listener to be a function, instead got a value of string type
✅ 正确写法：使用箭头函数包裹执行逻辑，确保 onClick 接收的是函数：
<button onclick="{()"> { window.location.href = 'https://github.com/'; }}
className="btn btn-github"
>
Visit GitHub
</button>
⚠️ 注意事项：
不要漏掉 () 和 {}：() => {...} 是函数定义；() => ...（无大括号）仅适用于单表达式且需显式 return；
-
若需跳转新窗口，推荐使用 window.open() 更可控：
onClick={() => window.open('https://github.com/', '_blank', 'noopener,noreferrer')} 避免在 JSX 中直接调用副作用方法（如 fetch、路由跳转）而不包裹函数，否则每次渲染都会触发；
-
在函数组件中，也可提取为具名处理函数，提升可读性与可测试性：
const handleGithubClick = () => { window.location.href = 'https://github.com/'; }; // …在 JSX 中： <button onclick="{handleGithubClick}" classname="btn btn-github"> Visit GitHub </button>
? 总结：React 的事件属性（onClick、onChange 等）不是 HTML 的字符串属性，而是 React 合成事件的函数接口。始终确保赋给它们的是函数（onClick={fn}），而非函数调用结果（onClick={fn()}）或原始值（onClick={'string'}）。这是 React 函数式事件模型的基本原则，也是避免运行时错误的关键。
