reactjs - 无状态组件中的 clickHandler？

Question

我是一个 React 新手，我正在尝试使用无状态组件创建一个简单的(可重用的)历史后退按钮，但我不确定如何合并/在哪里放置 clickHandler。我需要使用有状态组件吗？这是我对我正在尝试做的事情的非工作近似。

import React from 'react';

const BtnBack = () => (
  <button className="btn btn-back" onClick={this.handleClick}>BACK</button>
);

handleClick() {
  // history back code
};

export default BtnBack;

Answer 1

您正在对象或类之外编写类似对象/类的代码。将此代码想象成普通的 JavaScript:

import React from 'react';

const YourButton = () => (
  <button onClick={yourFunction}>BACK</button>
)

function yourFunction(event) {
  console.log('hello there')
}

如果您想传递更多参数，也可以内联此函数:

const YourButton = () => (
  <button onClick={event => yourFunction(event, 'foo', 'bar')}>BACK</button>
)

但是，在这种情况下，从可能与状态交互的父级传递函数是很常见的。

const YourButton = props => (
  <button onClick={props.yourFunction}>BACK</button>
)

此外，您说的是“在 const 中”，但如果需要，您可以使用 let 或 var，甚至直接导出它。