警告：未来版本的 React 将阻止 javascript

Posted 2023-02-22

【中文标题】警告：未来版本的 React 将阻止 javascript

【英文标题】：Warning: A future version of React will block javascript

【发布时间】：2020-05-07 12:04:55

【问题描述】：

我从 gitlab 克隆了 repo 并安装了依赖项，然后当我从命令行输入 yarn next dev 时，我得到了

index.js:1 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:;" 

错误。在浏览器中，我在登陆页面上得到错误code 404。有什么问题我无法克服。

【问题讨论】：

你克隆了什么repo，因为代码有错误！

【参考方案1】：

似乎在这段代码的某处你有一个元素，在它的属性某处有一个明确的 javascript 代码。类似于

<a href="javascript:;" ...>...</a>

如警告所述：React was passed "javascript:;"。这可能是一些旧的 repo，它使用this 来摆脱不会导致任何地方的<a> 标签。更常见的解决方案是使用href='#'。

但是，您得到的 404 可能意味着更多的东西，并且 repo 本身可能已损坏。

【讨论】：

但是 # 附加在我不想添加的 url 中。

您可以设置按钮的样式，使其看起来像 标记。

【参考方案2】：

您可以基于a 元素定义组件。下面是一堆代码sn-ps。

import React,  FC, MouseEvent  from 'react'
import classnames from 'classnames'

import './navigator.scss'

export interface INavigatorProps 
  className?: string
  prefixCls?: string
  style?: React.CSSProperties

  url: string

  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void


export const Navigator: FC<INavigatorProps> = (
  style,
  children,
  url: oldUrl,
  className = '',
  onClick: oldOnClick,
  prefixCls = 'pa-navigator',
) => 
  const classNameString = classnames(className, prefixCls)

  let [url = oldUrl, onClick = oldOnClick] = []
  if (/^javascript:/.test(url) || url === '#') 
    // @ts-ignore
    url = undefined

    onClick = (event) => 
      event.stopPropagation()

      oldOnClick?.call(Object.create(null), event)
    
  

  return (
    <a
      href=url
      style=style
      className=classNameString
      onClick=onClick
      rel='noopener noreferrer'
    >
      children
    </a>
  )