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中关于which “href” value should I use for JavaScript links的StackOverflow问题，似乎你们大多数人都同意javascript:void(0)是最好的选择，在React 16.9.0中将不再可能。

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

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

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

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

Answer 1

在React blog post中：

以javascript:开头的URL是危险的攻击面   因为很容易在标签中意外地包含未过滤的输出   例如<a href>并创建一个安全漏洞。

在React 16.9中，此模式继续起作用，但是它将记录一个   警告。如果您使用javascript: URL作为逻辑，请尝试使用React事件   处理程序。

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

Answer 2

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

raster

它将只包装事件处理程序以创建一个新的事件处理程序，该程序也调用OBS.R <- brick(OBS) REF.R <- brick(REF) RS <- resample(REF.R, OBS.R, method = "bilinear")。它将为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)"并仔细检查所有多余的样式。

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

2 个答案: