Javascript 使用react.js中的ref显示/隐藏多个按钮

我有带播放按钮的歌曲列表。我想切换按钮文本以相应地播放/暂停

我已经为播放/暂停

设置了ref，并尝试在单击按钮时隐藏/显示

 this.refs.play.hide().

但这是一个错误

未捕获类型错误：\ this.refs.play.hide不是函数 看这首歌

这是我的react组件代码

class Song extends React.Component {
  play = (event) => {
    this.refs.play.hide()
    console.log(this.refs.play);
  }
  render() {
    return (
      <div>
        <ul>
          <li>Song 1 <button onClick={this.play}><span ref="play">play</span> <span className='hide' ref="pause"> Pause</span></button></li>
          <li>Song 2 <button onClick={this.play}><span ref="play">play</span> <span className='hide' ref="pause"> Pause</span></button></li>
          <li>Song 3 <button onClick={this.play}><span ref="play">play</span> <span className='hide' ref="pause"> Pause</span></button></li>
        </ul>
      </div>
    );
  }
}

class.Component{
播放=（事件）=>{
this.refs.play.hide（）
console.log（this.refs.play）；
}
render（）{
返回(

歌曲1播放暂停
歌曲2播放暂停
歌曲3播放暂停

);
}
}

Player.js

import React，{Component}来自“React”；
导出默认类播放器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isPlaying:错误
};
}
切换播放=（）=>{
这是我的国家({
isplay:！this.state.isplay
});
};
render（）{
返回(
{/*实际播放器逻辑{this.props.songurl}*/}
{this.props.songName}
this.togglePlay（）}>
{this.state.isplay？“暂停”：“播放”}
);
}
}

PlayerList.js

import React，{Component}来自“React”；
从“/Player”导入播放器；
导出默认类SongList扩展组件{
render（）{
康斯特歌曲=[
{
名称:"歌一",，
网址：“google.com”
},
{
名称：“歌曲2”，
网址：“google.com”
},
{
名称:"歌三",，
网址：“google.com”
},
{
名称：“歌曲4”，
网址：“google.com”
},
{
名称:"歌五",，
网址：“google.com”
},
{
名称:"歌六",，
网址：“google.com”
}
];
返回(
{songs.map（（歌曲，键）=>(
))}
);
}
}

我有数千首歌曲，因此无法管理状态否我们可以这样做您必须创建一个歌曲组件，该组件将处理播放暂停，并且家长需要pas歌曲数据（URL）来播放歌曲。请检查我的编辑，如果您有任何疑问，请告诉我。我有多个按钮，希望更新特定的按钮文本，以便以与组件状态相同的方式进行更新

import React, { Component } from "react";
export default class Player extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isPlaying: false
    };
  }
  togglePlay = () => {
    this.setState({
      isPlaying: !this.state.isPlaying
    });
  };
  render() {
    return (
      <div>
        {/* actual player logic {this.props.songurl} */}
        <span>{this.props.songName}</span>
        <button onClick={() => this.togglePlay()}>
          {this.state.isPlaying ? "Pause" : "Play"}
        </button>
      </div>
    );
  }
}

    import React, { Component } from "react";
import Player from "./Player";
export default class SongList extends Component {

  render() {
    const songs = [
      {
        name: "song 1",
        url: "google.com"
      },
      {
        name: "song 2",
        url: "google.com"
      },
      {
        name: "song 3",
        url: "google.com"
      },
      {
        name: "song 4",
        url: "google.com"
      },
      {
        name: "song 5",
        url: "google.com"
      },
      {
        name: "song 6",
        url: "google.com"
      }
    ];
    return (
      <div>
        {songs.map((song, key) => (
          <Player key={key} name={song.name} url={song.url} />
        ))}
      </div>
    );
  }
}