如何在React的render方法中改用箭头函数来写长尾？

本文共计753个文字，预计阅读时间需要4分钟。

在React组件中绑定点击事件通常使用内联函数。以下是对原文的简化

jsx在React组件中，绑定点击事件通常使用内联函数的方式。例如：class Foo extends React.Component { handleClick=()=> { console.log('Click happened'); }

render() { return ; }}

在 React 组件中绑定点击事件通常的做法使用 class 属性。

class Foo extends Component {
handleClick = () => {
console.log('Click happened')
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}

但是有时候为了更迅速的完成代码逻辑，我们也常常是直接写在 render 方法中。

class Foo extends Component {
render() {
return <button onClick={() => console.log('Click happened')}>Click Me</button>;
}
}

并且使用箭头函数是向回调函数传递参数的最简单的办法。