clickHandler in stateless component？

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

而且你說「在一個常量」，但你可以使用let或var如果你願意，甚至直接將其導出。