onClick onWrapper 传递给 React Player 不工作

Question

我需要播放 Youtube 视频，所以我使用的是 React Player。单击我的视频，我必须全屏显示它。这是我的代码：

import ReactPlayer from 'react-player/lazy';
import { SerializedStyles } from '@emotion/core';
import _pick from 'lodash/pick';

import { StyledPlayerContainer, StyledContainer } from './style';

export const PROPS_TO_PICK_FOR_REACT_PLAYER = [
  'controls',
  'loop',
  'muted',
  'height',
  'width',
  'url'
];

export interface Props {
  autoPlay?: boolean;
  controls?: boolean;
  loop?: boolean;
  muted?: boolean;
  height?: string;
  width?: string;
  url: string;
  containerStyles?: SerializedStyles;
  playerContainerStyles?: SerializedStyles;
  onClick: (e: MouseEvent) => void;
}

const Wrapper = ({ children }) => <div>{children}</div>

const Player: React.FC<Props> = (props) => {
  const { onClick, containerStyles, autoPlay, playerContainerStyles } = props;
  return(
    <StyledContainer css={containerStyles}>
       <StyledPlayerContainer css={playerContainerStyles}>
        <ReactPlayer
          {..._pick(props, PROPS_TO_PICK_FOR_REACT_PLAYER)}
          playing={autoPlay}
          onClick={onClick}
          wrapper={Wrapper}
        />
     </StyledPlayerContainer>
    </StyledContainer>
  )
}

Player.defaultProps = {
  controls: true,
  height: '100%',
  width: '100%',
  loop: false,
  muted: false,
  autoPlay: true,
};

export default Player;

根据 React-Player 文档，我可以传递一个包装器，onClick 来响应播放器，onClick 将提供给我的包装器。正如在 devtools 中检查的那样，点击处理程序已附加到我的包装器，但未被调用。也尝试将 onClick 应用于 StyledContainer 和 StyledPlayerContainer，但未被调用。

Answer 1

onClick 在传递给 react-player 的包装器时永远不会起作用，因为 react-player 为 youtube 安装了一个 iframe。 iframe 作为一个单独的文档，因此，事件从 iframe 开始并在 iframe 结束，意味着捕获从 iframe 开始，传播仅在 iframe 结束，因此，wrapper 的 onClick 永远不会被调用。

onClick onWrapper 传递给 React Player 不工作

onClick on Wrapper passed to React Player not working

javascript

youtube-api

reactjs

react-player