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

【问题标题】：Warning: A future version of React will block javascript警告：未来版本的 React 将阻止 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，因为代码有错误！

标签： reactjs redux next.js

【解决方案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>
  )
}

【讨论】：