如何將函數作爲參數傳遞給TypeScript中的ReactJS組件

Question

我正在嘗試製作可重用的ReactJS按鈕組件，並且需要關於如何向組件傳遞一個函數，然後將其用作單擊事件。按鈕上的點擊事件不起作用。

下面是代碼，將調用組件：

export var MyPublicFunction = function (inArg: number) { 
    alert(inArg); 
} 

ReactDOM.render(<MyButton name="My Button" clickFunction={MyPublicFunction(1)} >Button</MyButton>, document.getElementById('content')); 

這我試圖組件寫：

interface myProps { 
    name: string; 
    clickFunction: any 
} 

class MyButton extends React.Component<myProps, {}> { 

    constructor(props: myProps) { 
     super(props); 
    } 

    render() { 
     return (<div> 
      <button ref="btn1" onClick={this.props.clickFunction} > 
       {this.props.name} 
      </button> 
     </div>); 
    } //end render. 
} //end class. 

Answer 1

<MyButton name="My Button" clickFunction={MyPublicFunction(1)} > 

表達MyPublicFunction(1)評估過程中立即調用包含表達式。你需要的是提供一個功能到clickFunction：

<MyButton name="My Button" clickFunction={() => MyPublicFunction(1)} > 

注意，如果你寫了這樣的事情，你會得到一個錯誤類型：

interface myProps { 
    name: string; 
    clickFunction:() => void; 
} 

Answer 2

此方法爲我工作：

父：

class App extends React.Component<Props, State> { 
    greet() { 
    alert('Hello!') 
    } 
    render() { 
     return (
     <div className="col-xs-10 col-xs-offset-1"> 
     <Home greet={this.greet}/> 
     </div> 
    ) 
    } 
} 

小孩：

interface Props { 
    greet:() => void 
} 

export class Home extends React.Component<Props, State> { 
constructor(props: any) { 
    super(props) 
} 

render() { 
    return (
    <button className="btn btn-warn" onClick={this.props.greet}>Greet</button> 
    ) 
} 
}