Vraag Hoe een functie binnen een render in React / Jsx op te roepen


Ik wil een functie binnen enkele ingesloten html noemen. Ik heb het volgende geprobeerd, maar de functie is niet opgeroepen. Zou dit de onjuiste manier zijn om een ​​functie binnen een weergavemethode aan te roepen?

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

26
2017-10-28 04:40


oorsprong


antwoorden:


Om de functie te bellen die je moet toevoegen ()

{this.renderIcon()}   

58
2017-10-28 04:48



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>

het hangt af van uw behoefte, u kunt beide gebruiken this.renderIcon() of binden  this.renderIcon.bind(this)

BIJWERKEN

Zo noem je een methode buiten de render.

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

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

De aanbevolen manier is om een ​​apart onderdeel te schrijven en het te importeren.


-1
2017-12-28 13:03