web-dev-qa-db-fra.com

Comment appeler une fonction dans un rendu dans React/Jsx

Je veux appeler une fonction dans un code HTML incorporé. J'ai essayé ce qui suit mais la fonction n'est pas appelée. Serait-ce la manière 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>
   );
 }
}
javascriptreactjsfunctionrenderjsx
32
lost9123193

Pour appeler la fonction, vous devez ajouter ()

{this.renderIcon()}
70
dknaack

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() ou bindthis.renderIcon.bind(this)

METTRE &AGRAVE; JOUR

C'est comment vous appelez 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 séparé et à l'importer.

6
Saahithyan Vigneswaran

Le correctif était à la réponse acceptée. Pourtant, si quelqu'un veut savoir pourquoi cela a fonctionné et pourquoi la mise en œuvre de la question SO n'a pas fonctionné,

Tout d'abord, les fonctions sont des objets de première classe en JavaScript. Cela signifie qu'ils sont traités comme n'importe quelle autre variable. La fonction peut être transmise en tant qu'argument à d'autres fonctions, peut être renvoyée par une autre fonction et peut être affectée en tant que valeur à une variable. Lire la suite ici .

Nous utilisons donc cette variable pour invoquer la fonction en ajoutant des parenthèses ()à la fin.

Une chose, Si vous avez une fonction qui retourne une fonction et que vous avez juste besoin d’appeler cette fonction, vous pouvez avoir un double paranthesis lorsque vous appelez la fonction extérieure () (). 

1
prime