javascript - 如何渲染具有不同数据的单个 react 组件？

Question

我创建了 Barchart 组件(显示条形图)，它是子组件。在父组件中，我将 props 传递给 Barchart 组件。在 Barchart 组件中，我使用 if/else 并相应地呈现 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 对于每个组件都是唯一的，而如果您使用类，它可能会与另一个组件冲突。