事件触发时更改 CSS 样式

Question

我正在尝试将THEOPlayer 集成到我的项目中，并且我想根据某些事件自定义样式。例如，我想在视频暂停时隐藏工具栏并显示叠加图像。 他们确实公开了一些我可以手动更改的 CSS 类，但我的问题是，如何在特定事件中更改 CSS 中的值。由于播放器是作为单个 JSX 元素导入的，因此我不知道如何将自定义类添加到其特定部分。所以我想知道是否有其他方法。

这是一个创建 Player 实例的组件：

class Player extends React.Component {
  _player = null;
  _el = React.createRef();

  componentDidMount() {
    const { source, onPlay, onPause } = this.props;

    if (this._el.current) {
      this._player = new window.THEOplayer.Player(this._el.current, {
        libraryLocation:
          "https://cdn.myth.theoplayer.com/7aff3fa6-f92e-45f9-a40e-1bce9911b073/",
      });

      this._player.source = source;
      this._player.addEventListener("play", onPlay);
      this._player.addEventListener("pause", onPause);
    }
  }

  componentWillUnmount() {
    if (this._player) {
      this._player.destroy();
    }
  }

  render() {
    return (
      <div
        className={
          "theoplayer-container video-js theoplayer-skin vjs-16-9 THEOplayer"
        }
        ref={this._el}
      >
      </div>
    );
  }
}

export default Player;

这是我想要更改样式 onPlay 和 onPause 的代码的一部分

      <div className={"player-container"}>
        <Player
          source={source}
          onPlay={() => {
            console.log("playing");
          }}
          onPause={() => {
            console.log("paused");
          }}
        />
      </div>

Answer 1

这样使用

state = {
  play: false,
  pause: true,
}
const playFn = () => {
  this.setState = ({
    play: true,
    pause: false,
  })
}
const pauseFn = () => {
  this.setState = ({
    play: false,
    pause: true,
  })
}
 <div className={"player-container"}>
        <Player
          source={source}
          onPlay={playFn}
          onPause={pauseFn}
          activatePlayClasses={play}
          activatePauseClasses={pause}
          bg={'https://example/example.jpg'}
        />
</div>

// on Player component
const { source, onPlay, onPause, activatePauseClasses, activatePlayClasses , bg} = this.props;


render() {
    return (
      <div
        className={
          `theoplayer-container video-js theoplayer-skin vjs-16-9 THEOplayer 
           ${activatePauseClasses ? 'your pause class' : ''}
           ${activatePlayClasses ? 'your play class' : ''}`
        }
        style={{backgroundImage: `url(${bg})`}}
        ref={this._el}
      >
      </div>
    );
  }

我已经更新了代码