如何在渲染功能中使其可用

Question

这是我的React组件：

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

用render函数中的this.showChart（）替换{this.showChart}。所以你的新代码应该是

render(){
 this.showChart();

 return(
      {this.showChart}      
);
}