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

Lesezeit: 3 Minuten

verloren9123193

Ich möchte eine Funktion in eingebettetem HTML aufrufen. Ich habe folgendes versucht, aber die Funktion wird nicht aufgerufen. Wäre dies die falsche Art, eine Funktion innerhalb einer Rendermethode 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>
   );
 }
}

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

{this.renderIcon()}

Es hängt von Ihrem Bedarf ab, Sie können beides verwenden this.renderIcon() oder binden this.renderIcon.bind(this). ist das richtig? jemand hat es unten geschrieben.

– Arora

12. März 2017 um 11:27 Uhr
Super-Moll-Anmerkung, für diejenigen, die Coffeescript verwenden, wäre dies {@renderIcon()}

– orion elenzil

5. September 2019 um 16:01 Uhr
Ich würde empfehlen, dies NICHT zu tun. 1.) renderIcon ist/sollte eine Komponente sein. {this.renderIcon()} ist nicht die Art und Weise, wie Sie Komponenten in React verwenden. 2.) Ihr Rendering ist die Quelle der Wahrheit für das, was Ihre Komponente rendert. Abstraktion, die zusätzliche Komplexität hinzufügt.

– Galupuf

18. Oktober 2019 um 14:34 Uhr
Für diejenigen unter Ihnen, die daran interessiert sind, warum dies im Allgemeinen und objektiv eine schlechte Praxis ist, lesen Sie bitte Folgendes: kentcdodds.com/blog/dont-call-a-react-function-component Es ist erwähnenswert, dass diese Antwort richtig ist und die gestellte Frage hervorragend beantwortet. Ich denke nur, dass es die Mühe wert ist, den Leuten beizubringen, dass es einen Grund gibt, es NICHT zu tun, wenn sie Code wie diesen schreiben.

– Galupuf

11. Dezember 2019 um 14:27 Uhr
@Galupuf Ein Grund, der es meiner Meinung nach rechtfertigen kann, ist, dass Sie beispielsweise eine Bedingung haben und keine verschachtelte Ternäre verwenden möchten: myConditionalRender(){ if(loading) return <Loader /> if(error) return <Error /> return <MyComponent /> } und render(){ <div> ...more stuff ... {myConditionalRenderer()} }

– jaycee

18. Januar 2021 um 0:15 Uhr

Saahithyan Vigneswaran

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 Ihrem Bedarf ab, Sie können beides verwenden this.renderIcon() oder binden this.renderIcon.bind(this)

AKTUALISIEREN

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

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

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

Die empfohlene Methode besteht darin, eine separate Komponente zu schreiben und diese zu importieren.

Dies scheint besser zu sein, da dies funktioniert, wenn Sie Ereignisse oder Parameter übergeben müssen

– Pranav Singh

25. September 2018 um 12:43 Uhr

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

Zuerst, Funktionen sind erstklassige Objekte in JavaScript. Das bedeutet, dass sie wie jede andere Variable behandelt werden. Funktionen können als Argument an andere Funktionen übergeben, von anderen Funktionen 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 hinzufügen () Am Ende.

Eine Sache, wenn Sie eine Funktion haben, die eine Funktion zurückgibt und Sie nur diese zurückgegebene Funktion aufrufen müssen, können Sie einfach doppelte Klammern verwenden, wenn Sie die äußere Funktion ()() aufrufen.

11486800cookie-checkSo rufen Sie eine Funktion in einem Render in React/Jsx auf

#Funktion #Javascript #jsx #machen #reagieren