React中如何实现点击按钮后渲染加载YouTube视频？

你点击按钮后没有视频渲染，核心问题有两个：

• React 中事件回调函数返回的 JSX 不会被自动挂载到页面上，只有类组件render方法、函数组件本身返回的 JSX 才会被解析渲染，你在handleYouTubeClick里直接 return 播放器的写法本身就不符合 React 的渲染规则
• 你贴的第二段类组件代码存在语法错误：类定义缺少闭合的花括号，代码本身就无法正常编译运行

你判断的没错，这个交互场景必须借助状态（state）实现：核心思路是用一个布尔值状态标记「用户是否触发了加载视频的操作」，仅当状态值为真时，才在渲染逻辑中输出播放器组件，页面初始加载时因为状态为假，播放器不会被创建，自然不会提前加载视频资源。

import { Component } from 'react';
import ReactPlayer from 'react-player';

class YouTubePlayer extends Component {
    constructor(props) {
        super(props);
        // 初始化状态：默认隐藏播放器
        this.state = {
            showYouTubePlayer: false
        }
    }

    handleYouTubeClick = () => {
        // 点击按钮时更新状态，触发组件重新渲染
        this.setState({
            showYouTubePlayer: true
        })
    }

    render() {
        return ( 
        <div>
            <p>Video Player</p>
            <button onClick={this.handleYouTubeClick}>YouTube</button>
            {/* 状态为真时才渲染播放器，初始加载阶段不会请求视频资源 */}
            {this.state.showYouTubePlayer && (
                <div>
                    <ReactPlayer url="https://youtu.be/OXHCt8Ym9gw"/>
                </div>
            )}
        </div>
        );
    }
}

export default YouTubePlayer

• 如果你需要实现点击按钮切换播放器显示/隐藏的效果，只需要把点击事件里的状态更新逻辑改成this.setState({showYouTubePlayer: !this.state.showYouTubePlayer})即可
• 目前 React 官方更推荐函数组件 + Hooks 的写法，逻辑和类组件完全一致，只是状态定义方式不同，参考实现如下：

import { useState } from 'react';
import ReactPlayer from 'react-player';

function YouTubePlayer() {
  // 定义状态和状态更新方法，默认不显示播放器
  const [showYouTubePlayer, setShowYouTubePlayer] = useState(false);
  return (
    <div>
      <p>Video Player</p>
      <button onClick={() => setShowYouTubePlayer(true)}>YouTube</button>
      {showYouTubePlayer && <ReactPlayer url="https://youtu.be/OXHCt8Ym9gw"/>}
    </div>
  )
}

export default YouTubePlayer

内容的提问来源于stack exchange，提问作者lia