你必须把变量isPlaying放在状态变量中。

constructor() {
    super()
    this.state = {
      isPlaying: false
    }
  }

然后你可以改变状态

this.setState({
   isPlaying:true
})

然后可以在代码中将此状态用作

{ this.state.isPlaying ?
    <svg key={1} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> :
    <svg key={2} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
}

型
这将重新呈现组件并显示您的更改。

使用this.setState设置状态

onPlayButtonClicked = () => {
    if (!this.state.isPlaying) {
        this.start(0, Math.round(this.currentTime - 0.5));
        this.setState({ isPlaying: true})
    }
    else {
        this.setState({ isPlaying: false})
        this.stop();
    }
}

或使用功能更新程序（如果您有其他状态）

onPlayButtonClicked = () => {
        if (!this.state.isPlaying) {
            this.start(0, Math.round(this.currentTime - 0.5));
           this.setState((state, props) => ({ // get latest state and props
                   ...state, // included existing state
                  isPlaying: true //updated only what is needed
           }));
        }
        else {
             this.setState((state, props) => ({
                   ...state,
                  isPlaying: false
             }));
            this.stop();
        }
    }

尝试将isPlaying添加到状态中，并由this.state.isPlaying使用。当状态或属性改变时，组件将重新呈现。

isPlaying不是state，因此它不会重新呈现，也不会看到任何更改。相反，您可以使用state来处理它
例如：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isPlaying:false};
  }

onPlayButtonClicked = () => {
    if (!this.state.isPlaying) {
        this.start(0, Math.round(this.currentTime - 0.5));
        this.setState({isPlaying : true});
    }
    else {
      this.setState({isPlaying : false});
        this.stop();
    }
}

在jsx中：

<button id="playButton" onClick={this.onPlayButtonClicked} className="bg-green-500 p-2 px-4 text-white rounded shadow">
{ this.state.isPlaying ?
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> :
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
}
</button>