反应16.9.0“ javascript :;” href替代？

Question

更新到React 16.9.0之后，我得到了这样的警告：

警告：作为安全预防措施，未来版本的React将阻止javascript：URL。如果可以，请改用事件处理程序。如果您需要生成不安全的HTML，请尝试使用dragonallySetInnerHTML。React已传递“ javascript :;”。

它来自如下代码：

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

查看关于我应该为 HTML中的JavaScript链接使用哪个“ href”值的StackOverflow问题，似乎你们中的大多数人都同意这javascript:void(0)是最好的选择，在React 16.9.0中将不再可能。

仅替换为href="#"是有问题的，因为浏览器将滚动到页面顶部并更改显示的URL。尤其是如果您使用哈希链接进行路由，这将是一个很大的问题。

我可以更新整个代码库，使其包含e.preventDefault();在每个事件处理程序中，但这似乎很难做到，尤其是当事件处理程序是由Redux动作创建者或挂钩自动创建时。我不会在任何地方寻找答案“仅包括e.preventDefault();”！

另外，<button>我还必须使用一种方法来处理许多不必要的样式。

所以我想知道：是否有特定于React库的解决方案才能获得<a>可以触发动作而没有副作用的有效链接？我想尽可能少地更改代码，并摆脱弃用警告。

Answer 1

在 React博客文章中：

以 开头的 URLjavascript:是一个危险的攻击面，因为很容易在标签中意外包含未经消毒的输出，<a href>并创建安全漏洞。

在 React 16.9 中，此模式继续有效，但会记录警告。如果您将javascript:URL 用于逻辑，请尝试改用 React 事件处理程序。

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

Answer 2

我想出了一个这样的组件：

import React, {useCallback} from 'react';

function AHrefJavascript({ children, onClick, ...props }) {
  const handleClick = useCallback(
    e => {
      e.preventDefault();
      return onClick(e);
    },
    [onClick]
  );

  return (
    <a href="#javascript" {...props} onClick={handleClick}>
      {children}
    </a>
  );
}

它只会包装事件处理程序以创建一个也调用e.preventDefault(). 它将添加一个href不会触发弃用警告的哈希链接。使用钩子的力量，当传入的处理程序更新时，它只会更改事件处理程序。这样做的一个问题是，在浏览器中您仍然可以在新选项卡中打开此链接，因此它不如带有 的链接好javascript:void(0)，后者会阻止这种情况。

它很容易使用，组件如下所示：

const Component = ({someAction}) => (
  <AHrefJavascript onClick={someAction}>click me</a>
);

因此，人们可能可以在整个项目中替换a href="javascript:void(0)"为AHrefJavascript，然后只需在各处添加组件的导入即可。

最后，也许最好的选择是使用 a<button>并通过环来删除所有不需要的样式。