Question

我已经创建了Barchart组件（显示条形图），它是子组件。在父组件中，我将props传递给Barchart组件。在Barchart组件中，我正在使用if/else并相应地渲染Barchart。

Barchart组件：

import React, { Component } from 'react';

class Barchart extends Component {

  constructor(props){
    super(props);
  }

  componentDidMount(){

    if(this.props.statType === 'batting'){

        const data1 = {
            labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
        series: [20, 60, 120, 200, 180, 20, 10]
        }

        const options1 = {
            width:300,
            height:300,
            distributeSeries: true
        }

        const mychart1 = new Chartist.Bar('.ct-bar-chart', data1,options1);

    }else if(this.props.statType === 'bowling'){

      const data1 = {
        labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
        series: [200, 600, 120, 200, 1800, 200, 100]
      }

      const options1 = {
        width:300,
        height:300,
        distributeSeries: true
      }

      const mychart1 = new Chartist.Bar('.ct-bar-chart', data1,options1);
    }
}
  render(){
    return(
         <div className="ct-bar-chart">
             {this.mychart1}
         </div>
    )}
}

export default Barchart;

保龄球组件：

return(
      <div><Barchart bowldata={this.props} statType='bowling'/></div>
)

打击组件：

return(
      <div><Barchart batdata={this.props} statType='batting'/></div>
)

我能够在击球页面（即击球组件）上看到条形图，但在保龄球页面（即保龄球组件）上什么也没有显示。

Answer 1

尝试在初始化图形而不是类时使用ref。考虑下面的代码：

render(){
    return(
         <div className="ct-bar-chart"
              ref={(ele) => this.chartElement = ele}>
              ...
         </div>
    )}

现在在初始化图表使用时：

const mychart1 = new Chartist.Bar(this.chartElement, data1,options1);

因此，这里的优势是this.chartElement对于每个组件都是唯一的，而如果您使用类，则它可能与另一个组件发生冲突。

如何用不同的数据渲染单个反应组件？

1 个答案: