Javascript 从另一个组件更新组件的状态

我想从另一个组件更新组件的图标。每当我点击播放列表时，音乐开始播放，图标应该改为暂停而不是播放，但我不知道如何从另一个组件更新组件的状态。

播放列表组件- 播放列表和音乐在此组件中

class PlayList extends React.Component {
    render() {
        const playMusic = () => {
            musics.forEach(e => e.pause());
            musics[this.props.arr].play();
            musics[this.props.arr].currentTime = 0;
            nowPlaying = this.props.arr;
            clickedOnMusic = 'clicked';
        };
        return (
            <div>
                <Card>
                    <CardActionArea onClick={playMusic} />
                </Card>
            </div>
        )
}

类播放列表扩展了React.Component{
render（）{
康斯特播放音乐=（）=>{
music.forEach（e=>e.pause（））；
音乐[this.props.arr].play（）；
音乐[this.props.arr].currentTime=0；
nowPlaying=this.props.arr；
clickedOnMusic='单击'；
};
返回(
)
}

底部AppBar组件- 图标和一些播放音乐的功能在这里

class BottomAppBar extends React.Component {
    state = {
        displayPlay: 'none',
        displayPause: '',
        displayVolume: '',
        displayMute: 'none'
    };
    render(){
        return(
            <IconButton onClick={handleChangePlay} style={{ color: 'white' }}>
                <PauseCircleOutlineRoundedIcon
                    style={{ fontSize: 46, display: this.state.displayPlay }}
                />
                <PlayCircleOutlineIcon
                    style={{ fontSize: 46, display: this.state.displayPause }}
                />
      )
}

class BottomAppBar扩展了React.Component{
状态={
显示播放：“无”，
显示暂停：“”，
显示卷：“”，
displayMute:“无”
};
render（）{
返回(
)
}

---

非常感谢您的阅读！

将它们包装在一个容器中，并在那里保持它们的状态。 例：

---

您可以使用上下文api，

PlayerLogic

的任何提升都可以通过

React.useContext

访问您在上下文中放置的任何内容，并在上下文中的值更改时重新呈现

const PlayerContext=React.createContext（）；
const PlayerLogic=（{children}）=>{
常量[状态，设置状态]=React.useState({
玩：错，
});
const setPlaying=React.useCallback(
val=>
设置状态（当前=>（{…当前，播放：val}）），
[]
);
const pause=React.useCallback（（）=>setPlaying（false）[
布景，
]);
const play=React.useCallback（（）=>setPlaying（true）[
布景，
]);
返回(
{儿童}
);
};
常量组件一=（）=>{
常数{
暂停，
玩
国家：{播放}，
}=React.useContext（PlayerContext）；
返回(
{玩吗(
暂停
) : (
玩
)}
);
};
类ComponentTwo扩展了React.Component{
render（）{
返回this.context.state.playing
“正在玩”
：“什么也没有玩”；
}
}
ComponentTwo.contextType=PlayerContext；
常数A=（）=>；
常数B=（）=>；
常数C=（）=>{
常数{
国家：{播放}，
}=React.useContext（PlayerContext）；
return`在组件C中，正在播放${JSON.stringify(
玩
)}`;
};
常量应用=（）=>(
);
ReactDOM.render（，document.getElementById（'root'）；

您可以使用redux来实现这一点，也可以使用react-hooksyeah，但我写了很多代码。重构redux在这里是不可能的，但您是对的，请您解释更多我没有使用挂钩，我想保存program@TuR1NG将ComponentTwo更改为一个类。

我想保存程序的核心

不确定您的意思，当前，上下文只有3个可以轻松设置的属性。

<Parent>
   <PlayList/>
   <BottomAppBar />
</Parent>