wake-up-neo.net

So rufen Sie eine Funktion in einem Render in React/Jsx auf

Ich möchte eine Funktion in einem eingebetteten HTML-Code aufrufen. Ich habe folgendes versucht, aber die Funktion wird nicht aufgerufen. Ist dies die falsche Art, eine Funktion innerhalb einer Render-Methode aufzurufen? 

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

Um die Funktion aufzurufen, müssen Sie () hinzufügen.

{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>

es hängt von Ihren Bedürfnissen ab. Sie können entweder this.renderIcon() oder bindthis.renderIcon.bind(this) verwenden.

UPDATE

So rufen Sie eine Methode außerhalb des Renderers auf. 

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

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

Es wird empfohlen, eine separate Komponente zu schreiben und zu importieren.

Der Fix war bei der akzeptierten Antwort. Wenn jedoch jemand wissen möchte, warum es funktioniert hat und warum die Implementierung in der SO - Frage nicht funktioniert hat,

Erstens, Funktionen sind erstklassige Objekte in JavaScript. Das heißt, sie werden wie jede andere Variable behandelt. Funktion kann als Argument an andere Funktionen übergeben werden, kann von einer anderen Funktion zurückgegeben und einer Variablen als Wert zugewiesen werden. Lesen Sie hier mehr .

Also verwenden wir diese Variable für rufen Sie die Funktion auf, indem Sie Klammern ()} _ am Ende hinzufügen.

Eine Sache, Wenn Sie eine Funktion haben, die eine Funktion zurückgibt, und Sie müssen nur die zurückgegebene Funktion aufrufen, können Sie beim Aufruf der äußeren Funktion () () () () () nur doppelte Paranthesis haben. 

1
prime