Как передать функцию в качестве аргумента компоненту ReactJS в TypeScript

Question

Я пытаюсь сделать повторно используемый компонент кнопки ReactJS и вам нужна помощь о том, как передать функцию компоненту, а затем использовать его как событие click. Событие клика на кнопке не работает.

Вот код, который будет вызывать компонент:

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