javascript - React 16.9.0 "javascript:;"href 替代方案？

Question

这个问题已经有答案了:

In React, how can I cause anchors to do nothing on click? (17 个回答)

已关闭 4 年前。

更新到 React 16.9.0 后，我收到如下重大警告:

Warning: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:;".

它来自这样的代码:

const Component = ({someAction}) => (
  <a href="javascript:void(0)" onClick={someAction}>click me</a>
);

查看 StackOverflow 上有关 which “href” value should I use for JavaScript links 的问题在 HTML 中，似乎你们大多数人都同意 javascript:void(0)是最好的选择，在 React 16.9.0 中将不再可能。

只需替换为 href="#"这是有问题的，因为浏览器会滚动到页面顶部并更改显示的 URL。特别是如果您使用哈希链接进行路由，这是非常有问题的。

我可以更新我的整个代码库以具有 e.preventDefault();在每个事件处理程序中，但这似乎很难做到，特别是当事件处理程序是从 Redux 操作创建者或 Hook 自动创建时。我不会到处寻找答案“只需包含e.preventDefault();”!

还使用<button>意味着我必须处理许多不需要的样式。

所以我想知道:是否有任何特定于 React 库的解决方案来获得有效的 <a>仅触发操作而没有副作用的链接？我想尽可能少地更改代码并消除弃用警告。

Answer 1

在 react 中blog post :

URLs starting with javascript: are a dangerous attack surface because it’s easy to accidentally include unsanitized output in a tag like <a href> and create a security hole.

In React 16.9, this pattern continues to work, but it will log a warning. If you use javascript: URLs for logic, try to use React event handlers instead.

我个人更喜欢这样使用它: <a href="#!" onClick={clickAction}>Link</a>