Question

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

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

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>
        )
}

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

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 }}
                />
      )
}

非常感谢您阅读！

Answer 1

将它们包装在容器中，并在那保持状态。例如：

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

Answer 2

您可以使用上下文api，PlayerLogic的任何提升者都可以使用React.useContext访问您放置在上下文中的任何内容，并且当上下文中的值更改时将重新呈现。

const PlayerContext = React.createContext();
const PlayerLogic = ({ children }) => {
  const [state, setState] = React.useState({
    playing: false,
  });
  const setPlaying = React.useCallback(
    val =>
      setState(current => ({ ...current, playing: val })),
    []
  );
  const pause = React.useCallback(() => setPlaying(false), [
    setPlaying,
  ]);
  const play = React.useCallback(() => setPlaying(true), [
    setPlaying,
  ]);
  return (
    <PlayerContext.Provider
      value={{
        state,
        pause,
        play,
      }}
    >
      {children}
    </PlayerContext.Provider>
  );
};
const ComponentOne = () => {
  const {
    pause,
    play,
    state: { playing },
  } = React.useContext(PlayerContext);
  return (
    <div>
      {playing ? (
        <button onClick={pause}>pause</button>
      ) : (
        <button onClick={play}>play</button>
      )}
    </div>
  );
};
class ComponentTwo extends React.Component {
  render() {
    return this.context.state.playing
      ? 'now playing'
      : 'nothig is playing';
  }
}
ComponentTwo.contextType = PlayerContext;
const A = () => <B />;
const B = () => <C />;
const C = () => {
  const {
    state: { playing },
  } = React.useContext(PlayerContext);
  return `In component C, is playing ${JSON.stringify(
    playing
  )}`;
};
const App = () => (
  <PlayerLogic>
    <ComponentOne />
    <ComponentTwo />
    <div>
      <A />
    </div>
  </PlayerLogic>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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

2 个答案: