Wie machen diese verfügbar Funktion innerhalb machen

Question

Dies ist meine Reaktion Komponente:

constructor(props) { 
    super(props); 

    this.state = { 
    }; 
    this.showChart = this.showChart.bind(this) 
} 

showChart() { 
    console.log('test') 
} 

render() { 

    {this.showChart} //throws error that, this is undefined 

    return() (
     {this.showChart} //prints test 
    ) 
} 

Nun, wenn ich die Funktion von render() aber außerhalb return() was soll ich tun nennen wollen?

Answer 1

Die Komponentensyntax ist an einigen Stellen nicht korrekt. this ist in Render verfügbar.

constructor(props) { 
    super(props); 

    this.state = { 
    }; 
    this.showChart = this.showChart.bind(this) 
} 

showChart() { 
    console.log('test') 
} 

render() { 

    this.showChart() 

    return ( 
     <div>{this.showChart()}</div> 
) 

} 

EDIT:

Sie können auch mit Pfeil Funktionen zusammenarbeiten, um die Funktionen zu binden, um Ihre Komponente. Auf diese Weise müssen Sie nicht jede Funktion bind. Es sieht viel sauberer:

constructor(props) { 
    super(props); 

    this.state = { 
    }; 
} 

showChart =() => { 
    console.log('test') 
} 

render() { 

    this.showChart() 

    return ( 
     <div>{this.showChart()}</div> 
) 

} 

Answer 2

ersetzen {this.showChart} mit this.showChart() innerhalb der Funktion machen. Dein neuer Code sollte also

sein

render(){ 
this.showChart(); 

return(
     {this.showChart}  
); 
}