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 渲染机制的强制要求。当你这样写：
<button onClick={window.href='https://github.com/'} className="btn btn-github">
Visit GitHub
</button>React 实际上会在组件渲染时立即执行 window.href='https://github.com/'（注意：此处应为 window.location.href，window.href 并不存在），并将赋值结果（即字符串 'https://github.com/'）作为 onClick 的值传入。这违反了 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>⚠️ 注意事项：
- 使用 window.location.href 而非 window.href（后者不是标准属性，会静默失败）；
- 若需防止默认行为或处理异步操作（如 API 调用后跳转），箭头函数同样适用；
- 避免在 onClick 中直接写表达式或语句（如 onClick={doSomething()}），这会导致每次渲染都执行，而非点击时执行；
- 对于高频触发场景（如列表项），可考虑使用 useCallback 优化函数引用稳定性。
? 补充：更推荐的导航方式（尤其在单页应用中）是使用 React Router 的 useNavigate Hook：
import { useNavigate } from 'react-router-dom';
function MyButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('https://github.com/', { replace: true })}
className="btn btn-github">
Visit GitHub
</button>
);
}但若需强制外部跳转（离开当前 SPA），window.location.href 仍是简洁可靠的选择——只要确保它被正确包裹在函数中。
