发挥父亲和儿子之间的音频反应

Question

当我尝试从APP播放音频到GrandChild时，我遇到问题。 GrandChild使用数据和mp3记录道具。 mp3会根据ID进行更改。 因为我必须与其他玩家并肩作战，所以我试图在所有应用之父中扮演逻辑角色。 谢谢！ 这是我的代码：

Child.js

const mock = {
        "type": "CONTENT",
        "content": {
            "id": "5ce55601df641d7b01cd3592",
            "name": "Program 1",
            "title": "Program 1",
            "description" : 'Lorem Ipsum',
            "assets" : {
                "mp3": 'https://www.computerhope.com/jargon/m/example.mp3'
            }
        }
    }


export default class ContentAudioListItem extends React.Component {
    render(){
        return (
            <React.Fragment>
                <div className="content-audio-list-item">
                    <div className='header'>
                        <div className='img'>
                            <img alt='' src={imageSlider} className="img-slider img-responsive pull-right" />
                        </div>

                    </div>
                    <div className="player-list">
                       <GrandChild 
                        data={mock.content} // send mock to grandchild
                        handleName={this.props.handleName} 
                        handlePlay={this.props.handlePlay} 
                        showPlay={this.props.showPlay} 
                        showPause={this.props.showPause} /> 
                    </div>
                </div>
            </React.Fragment>
        )
    }

}

GrandChild.js

export default class ContentSoundItem extends React.Component{

    handlePlaySound = async() => {
        this.props.handleName(this.props.data) // send data to app
    }

   render(){

    return (
        <React.Fragment>
                <ul className="content-audio-list-item">
                    <li className='player-info'>
                        <div>
                            <div className="info">
                                <p className="player-title">{this.props.data.title}</p>
                             </div>
                            <div className='player-icon'>
                                <audio id={this.props.data.id}  src={this.props.data.assets.mp3}></audio>
                                <div onClick={this.handlePlaySound}>
                                    <FaPlay className="icon-play" />
                                </div>
                                <div onClick={this.handlePlaySound}>
                                    <FaPauseCircle className="icon-play"/>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
        </React.Fragment>
    )
   }

}

APP.JS

handleName = (data) => {
    console.log('data', data)
    if(data != undefined) {
      this.setState({audio: true})
      this.setState({mp3AudioInfo : data})
      console.log(data.id)
      $('data.id').play(); // Cannot read property 'play' of undefined
    } else {
      console.log('NO CHANGE')
    }
  }