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

你也在＆＃34;在一个const＆＃34;但如果需要，您可以使用let或var，甚至可以直接导出。

无状态组件中的clickHandler？

1 个答案: