如何使用不同的数据呈现单个react组件?

我创造了 Barchart 组件(显示条形图),它是子组件。在父组件中传递 props 到 柱状图 组件。在 柱状图 我正在使用的组件 if/else 并呈现 柱状图 因此。

条形图组件:

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

我可以在击球页面(即击球组件)上看到条形图,但在保龄球页面(即保龄球组件)上没有显示任何内容。