Reactjs 关于组件反应评级去极化的建议

我正在使用我从以下下载的组件：

它工作得很好，但我真的需要在我只想显示评级而不想显示交互元素的情况下禁用组件的功能

我查看了文档，没有找到任何可以直接禁用它的内容。我可以看到一些关于禁用内联样式的内容，但不确定这将如何工作

我已经复制了原始HTML，并试图用这个功能重建一个组件，但似乎有太多的样式需要复制，我认为这种方法行不通

---

有人能建议这是否可行，或者推荐一个替代组件来实现这一点吗？

只是不要调用设置状态的方法。我使用了这个例子，去掉了

changeRating

方法，删除了

changeRating

属性。如果无法更改状态，用户将无法更新评级

//IMPORT STATEMENTS ETC...
class Foo extends React.Component {
  constructor(props) {
    super(props)
    this.state = { rating: 5 }
  }
  /* YOU DON'T NEED THIS METHOD EITHER IF YOU'RE NOT CHANGING STATE
  changeRating(rating) {
    this.setState({
     rating: rating
    })
  }
  */
  render() {
    return (
      <div>
        <Ratings 
          /*changeRating={this.changeRating} <-- GET RID OF THIS LINE*/
          rating={this.state.rating}
          widgetRatedColors='blue'>
          <Ratings.Widget />
          <Ratings.Widget />
          <Ratings.Widget
            widgetDimension='60px'
            svgIconViewBox='0 0 5 5'
            svgIconPath='M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z'
          />
          <Ratings.Widget widgetHoverColor='black' />
          <Ratings.Widget />
        </Ratings>
      </div>
    )
  }
}

function App() {
  return (
    <div className='App'>
      <main>
        <Foo />
      </main>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('example'))

//导入语句等。。。
类Foo扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={rating:5}
}
/*如果不更改状态，也不需要此方法
更改额定值（额定值）{
这是我的国家({
评级：评级
})
}
*/
render（）{
返回(
只是不要调用设置状态的方法。我使用了这个示例，去掉了
changeRating
方法，删除了
changeRating
属性。如果无法更改状态，用户将无法更新评级

//IMPORT STATEMENTS ETC...
class Foo extends React.Component {
  constructor(props) {
    super(props)
    this.state = { rating: 5 }
  }
  /* YOU DON'T NEED THIS METHOD EITHER IF YOU'RE NOT CHANGING STATE
  changeRating(rating) {
    this.setState({
     rating: rating
    })
  }
  */
  render() {
    return (
      <div>
        <Ratings 
          /*changeRating={this.changeRating} <-- GET RID OF THIS LINE*/
          rating={this.state.rating}
          widgetRatedColors='blue'>
          <Ratings.Widget />
          <Ratings.Widget />
          <Ratings.Widget
            widgetDimension='60px'
            svgIconViewBox='0 0 5 5'
            svgIconPath='M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z'
          />
          <Ratings.Widget widgetHoverColor='black' />
          <Ratings.Widget />
        </Ratings>
      </div>
    )
  }
}

function App() {
  return (
    <div className='App'>
      <main>
        <Foo />
      </main>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('example'))

//导入语句等。。。
类Foo扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={rating:5}
}
/*如果不更改状态，也不需要此方法
更改额定值（额定值）{
这是我的国家({
评级：评级
})
}
*/
render（）{
返回(