Javascript 使用React Rating组件，如何根据评级显示自定义消息？

我目前正在使用允许我的用户提供1-5星级评级

在我的渲染函数中，我具有以下功能：

      <Rating
        fractions={2}
        onRate={(rate) => document.getElementById('label-onrate').innerHTML = rate || ''}
      />
      <span class="label label-default" id="label-onrate"></span>

document.getElementById（'label-onrate'）.innerHTML=rate | |'''}
/>

这将返回5颗星，当您将鼠标悬停在一颗星上时，

#label onrate

文本将更新以向用户显示评级值

我需要做的是更新文本，但不是使用评级值，而是使用每个评级值的自定义消息

---

如何为每个评级值定义自定义消息，并使该消息显示在

#label onrate

中？

创建一个用于利率更改的事件处理程序，并使label onrate文本保持状态。您不需要使用React直接修改DOM。更新状态时，组件将重新招标。大概是这样的：

  state = {
     label: "initial"
  };
  ...
  onRateChange = (rate) => {
      if(rate === 1)
         this.setState({label: "new text"}); //Triggers render
  }
  ...
  <Rating
    fractions={2}
    onRate={(rate) => this.onRateChange(rate)}
  />
  <span class="label label-default" id="label-onrate">{this.state.label}</span>

状态={
标签：“首字母”
};
...
onRateChange=（速率）=>{
如果（速率==1）
this.setState（{label:“new text”}）；//触发渲染
}
...
此.onRateChange（rate）}
/>
{this.state.label}