Comment appeler une fonction à L'intérieur D'un rendu dans React / Jsx

je veux appeler une fonction à l'intérieur d'un html intégré. J'ai essayé ce qui suit, mais la fonction n'est pas appelée. Serait-ce la mauvaise façon d'appeler une fonction à l'intérieur d'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>
   );
 }
}
28
demandé sur Ian Kemp 2016-10-28 07:40:20

2 réponses

Pour appeler la fonction, vous devez ajouter ()

{this.renderIcon()}
59
répondu dknaack 2016-10-28 04:48:39 

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

UPDATE

c'est comme ça qu'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>
   );
}

il est recommandé d'écrire un composant séparé et d'importation.

4
répondu Saahithyan Vigneswaran 2018-01-24 08:24:33