Comment appeler une fonction dans un rendu en React/Jsx ?

Question

Je veux appeler une fonction dans un fichier html intégré. J'ai essayé ce qui suit mais la fonction n'est pas appelée. Serait-ce la façon incorrecte d'appeler une fonction dans une méthode de rendu ?

import React, { Component, PropTypes } from 'react';

export default class PatientTable extends Component {
      constructor(props) {
        super(props);
        this.state = { 
         checking:false
      };
        this.renderIcon = this.renderIcon.bind(this);
  }

  renderIcon(){
    console.log("came here")
    return(
      <div>Function called</div>
    )
  }

  render() {

   return (
       <div className="patient-container">

       {this.renderIcon}      

      </div>
   );
 }
}

Answer 1

Pour appeler la fonction, vous devez ajouter ()

{this.renderIcon()}

Answer 2

class App extends React.Component {

  buttonClick(){
    console.log("came here")

  }

  subComponent() {
    return (<div>Hello World</div>);
  }

  render() {
    return ( 
      <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
          {this.subComponent()}
       </div>
     )
  }

}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

cela dépend de votre besoin, vous pouvez utiliser soit this.renderIcon() o lier this.renderIcon.bind(this)

UPDATE

C'est ainsi que l'on appelle une méthode en dehors du rendu.

buttonClick(){
    console.log("came here")
}

render() {
   return (
       <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
       </div>
   );
}

La méthode recommandée consiste à écrire un composant distinct et à l'importer.

Answer 3

La solution se trouvait au niveau de la réponse acceptée. Pourtant, si quelqu'un veut savoir pourquoi cela a fonctionné et pourquoi la mise en œuvre dans la question de l'OS n'a pas fonctionné,

D'abord, Les fonctions sont des objets de première classe en JavaScript . Cela signifie qu'elles sont traitées comme n'importe quelle autre variable. Une fonction peut être passée comme argument à d'autres fonctions, peut être retournée par une autre fonction et peut être assignée comme valeur à une variable. Plus d'informations ici .

Donc on utilise cette variable pour invoque la fonction en ajoutant des parenthèses () à la fin .

Une chose, Si vous avez une fonction qui renvoie une fonction et que vous avez juste besoin d'appeler cette fonction renvoyée, vous pouvez simplement avoir des doubles paranthèses lorsque vous appelez la fonction externe ()().