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中链接的方式。但是，这是来自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。

Answer 2

尝试将onCLick替换为onClick

链接：发现未知道具：onClick

2 个答案: