无状态组件中的clickHandler？

Question

我是一个React noobie,我正在尝试使用无状态组件创建一个简单(可重用)历史记录后退按钮,但我不确定如何合并/在哪里放置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如果你想,甚至可以直接导出它.