onClick 传递给 React Player 的 Wrapper 不起作用答案

【问题标题】：onClick on Wrapper passed to React Player not workingonClick 传递给 React Player 的 Wrapper 不起作用
【发布时间】：2021-01-22 01:41:47
【问题描述】：

我需要播放 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 但它没有被调用。

【问题讨论】：

标签： javascript reactjs youtube-api react-player

【解决方案1】：

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

【讨论】：