如何使這個裏面提供渲染功能

Question

這是我的陣營組成：

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

現在，如果我想從render()調用函數，但外界return()我應該怎麼辦？

Answer 1

您的組件語法在一些地方不正確。渲染中可用this。

constructor(props) { 
    super(props); 

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

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

render() { 

    this.showChart() 

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

} 

編輯：

您也可以用箭頭功能結合工作職能說你的組件。通過這樣做，您不必爲bind每個功能。它看起來會更加清晰：

constructor(props) { 
    super(props); 

    this.state = { 
    }; 
} 

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

render() { 

    this.showChart() 

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

} 

Answer 2

替換{} this.showChart與this.showChart（）渲染函數內。所以你的新代碼應該是

render(){ 
this.showChart(); 

return(
     {this.showChart}  
); 
}