Javascript 在D3 React组件中反复复制相同的辅助函数

我正在研究一个D3React组件，遇到了这个问题，我不得不一次又一次地重新定义我的常量和助手函数。我的d3组件的总体布局如下：

class App extends React.Component {
  constructor(props) { 
    super(props);    
    this.state = {
      chartType: 'A'
    }
  }

  getHitData() {...}
  drawChartA() {...}
  drawChartB() {...}
  drawChartC() {...}
  drawChartD() {...}
  drawChartE() {...}
  toggleButton() {...}

  componentDidMount() {
    this.drawChartA()
  }
  componentDidUpdate() {
    const { chartType } = this.state;
    if(chartType == "A") { 
      this.drawChartA() 
    } 
    else if(..B) {...}
    else if(..C) {...}
    ...
  }

  render() {
    return (
      <div>
        <svg className='chart'>
          <g className='chartA' />
          <g className='chartB' />
          <g className='chartC' />
          <g className='chartD' />
        </svg>
      </div>
    )
  }
}

类应用程序扩展了React.Component{
构造器（道具）{
超级（道具）；
此.state={
图表类型：“A”
}
}
getHitData（）{…}
drawChartA（）{…}
drawChartB（）{…}
drawChartC（）{…}
drawChartD（）{…}
drawChartE（）{…}
toggleButton（）{…}
componentDidMount（）{
这是drawChartA（）
}
componentDidUpdate（）{
const{chartType}=this.state；
如果（chartType==“A”）{
这是drawChartA（）
} 
如果（…B）{…}
如果（…C）{…}
...
}
render（）{
返回(
)
}
}

在我的实际代码中，在每个不同的drawChartA（）、drawChartB（）等函数中，我发现自己必须重新定义这两个常量（chartWidth、chartHeight、padding、margin），以及某些重要的d3辅助函数（colorScales、xScale、yScale、radiusScale等），这感觉不对劲。特别是，我打破了干燥的原则

是否应在此.state中定义chartWidth/padding/etc.常量？我应该如何处理所有的helperd3函数？我认为这些不应该是drawChart（）函数的参数

如果您对此有任何想法，我们将不胜感激，谢谢

是否应在此.state中定义chartWidth/padding/etc.常量

不，常量不应该是状态的一部分。只有更改组件呈现方式或数据更改时的行为的数据才应是状态的一部分

您可以将常量存储为类属性，并在构造函数中初始化它们

类似地，您可以在类上定义帮助器函数

constructor(props) { 
    super(props);    
    this.state = {
        chartType: 'A'
    }
    this.chartProperties = {
        width: 25,
        height: 30,
        margin: 35
    };
}

colorScales() { ... }

drawChartA() {
    const colorScales = this.colorScales();
    return <chart width={ this.chartProperties.width } />
}

constructor（props）{
超级（道具）；
此.state={
图表类型：“A”
}
此值为0.chartProperties={
宽度：25，
身高：30，
差额：35
};
}
颜色比例（）{…}
drawChartA（）{
const colorScales=this.colorScales（）；
返回
}

这非常完美，将使我的React代码变得更好，谢谢！当我试图在drawChartA（）或任何这些函数中调用this.chartProperties时，它是未定义的。@Canovice不应该这样。你能展示你的代码吗？在初始化chartProperties之前是否调用构造函数中的函数？再次访问以添加我已解决的问题。我失去了“这个”的范围，这就是问题所在。