Javascript 根据值动态更改宽度

我有一个250像素的div，在这个div里面我有3个孩子的div

我希望这3个div中的每一个都根据它们的值进行缩放。因此，它们最终会扩大到100%

我现在有这个

  <div className="spread">
    <div className="detractors" style={{width: 250 * this.state.analytics.spread.detractors / 100 + '%'}}>
      {this.state.analytics.spread.detractors}
    </div>
    <div className="passive" style={{width: 250 * this.state.analytics.spread.passives / 100 + '%'}}>
      {this.state.analytics.spread.passives}
    </div>
    <div className="promoters" style={{width: 250 * this.state.analytics.spread.promoters / 100 + '%'}}>
      {this.state.analytics.spread.promoters}
    </div>
  </div>

{this.state.analytics.spread.detractors}
{this.state.analytics.spread.passives}
{this.state.analytics.spread.promotors}

我正在努力做到这一点：

---

您可以将宽度定义为总宽度的百分比，也可以根据固定宽度计算一个值，但这是两个不同的东西。如果您正在计算百分比，则宽度

250

不应是一个系数。分母是三者的总和

constrenderspread=（{贬损者、被动者、促进者}）=>{
const sum=诽谤者+被动者+推动者；
返回(
{诽谤者}
{被动式}
{发起人}
);
};
render（，document.body）
。诽谤者{
背景：红色；
}
.被动的{
背景：黄色；
}
.发起人{
背景：绿色；
}
.传播{
显示器：flex；
弯曲方向：行；
颜色：白色；
字体大小：60%；
线高：300%；
文本对齐：居中；
}

宽度应为百分比或基于250的值，但不能同时为两者。百分比不取决于元素的宽度。