Link：发现未知道具：onClick

Question

我正在使用与 nextjs 的反应。当我尝试将 onClick 添加到 link 时出现错误。

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link'

class Navbar extends React.Component {
  render () {
    return(
      <div>
        <Link href="/index" onClick={()=>console.log("sdf")}><a>Home</a></Link>
        <Link href="/about"><a>About</a></Link>
      </div>
    )
  }
}

export default Navbar;

reactjs 中的 links 添加 onClick 不就是这样吗？或者这与 nextjs

有关

Answer 1

尝试用 onClick

替换 onCLick

Answer 2

是的，这是在React.js中向link添加处理程序的方法。但是，这是来自 Next.js 的 Link 组件的问题。这个 Link 组件没有任何 onClick 属性。它甚至用自己的实现覆盖了其子项的 onClick 道具。

所以，这也行不通：

<Link href="/index">
  <a onClick={() => console.log('Does not work')}>Home</a>
</Link>

简单的解决方案可能是将 onClick 处理程序嵌套到另一个元素中，如下所示：

<Link href="/index">
  <a>
    <span onClick={() => console.log('It works')}>Home</span>
  </a>
</Link>

或者用另一个元素包裹 Link，例如 span：

<span onClick={() => console.log('It also works')}>
  <Link href="/index">Home</Link>
</span>

Github 上有一个未解决的问题：https://github.com/zeit/next.js/issues/1490。

Link：发现未知道具：onClick

Link: unknown props found: onClick

reactjs

next.js