链接：发现未知道具：onClick

Question

我正在使用与nextjs的反应。当我尝试添加onClick链接时，出现错误。

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;

这不是onClick如何添加到reactjs中的链接吗？还是这与nextjs有关

Answer 1

是的，这是在React.js中添加处理程序以链接的方式。但这是LinkNext.js组件的问题。该Link组件没有任何onClick道具。它甚至通过onClick自己的实现覆盖其子项的prop。

因此，这也不起作用：

<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。