有没有办法改变audioplayer的url，一旦它所在的组件的状态改变了？

import React, { Component } from 'react';
import Audioplayer from './Audioplayer';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      audioUrl: 'https://example.com/audio.mp3', // 初始的audioplayer的url
      // 其他组件的状态
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.audioUrl !== this.state.audioUrl) {
      // audioplayer的url发生了变化
      // 在这里可以执行其他逻辑，如更新其他相关状态等

      // 更新audioplayer的url
      // 以下是伪代码，具体根据实际情况进行修改
      this.refs.audioplayer.updateUrl(this.state.audioUrl);
    }
  }

  handleChangeAudioUrl = () => {
    // 改变audioplayer的url的方法，可以是任意触发事件的方式，如点击按钮、输入框输入等
    const newUrl = 'https://example.com/new_audio.mp3';
    this.setState({ audioUrl: newUrl });
  };

  render() {
    return (
      <div>
        <Audioplayer ref="audioplayer" url={this.state.audioUrl} />
        <button onClick={this.handleChangeAudioUrl}>改变URL</button>
      </div>
    );
  }
}

export default App;