如何在按钮单击react时渲染YouTube视频？

Question

我是新手反应的新手，并且正在尝试构建视频播放器页面。目前，我有一个超级基本的页面 - 我想拥有一个按钮，当单击时，呈现YouTube视频。

player软件包的资源

function YouTubePlayer () {
  return (
    <div>
      <ReactPlayer
        url="https://www.youtube.com/watch?v=ug50zmP9I7s"
      />
    </div>
  )
}

export default YouTubePlayer

我遵循了使用NPM React - 单击按钮。我创建了一个按钮和一个类似的事件处理程序：

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

class YouTubePlayer extends Component {
    
    constructor(props) {
        super(props);
    }

    handleYouTubeClick = () => {
        return (
            <div>
                <ReactPlayer url="https://youtu.be/OXHCt8Ym9gw"/>
            </div>
        );
    }

    render() {
        return ( 
        <div>
            <p>Video Player</p>
            <button onClick={this.handleYouTubeClick}>YouTube</button>
        </div>
        );
    }

export default YouTubePlayer

但是没有视频呈现。我必须与国家做某事吗？我不知道该怎么做。同样，我对反应很新，所以请让我知道我是否正在完全错误。谢谢。

Answer 1

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

class YouTubePlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    };
  }

  handleYouTubeClick = () => {
    this.setState({
      isClicked: true
    });
  };

  render() {
    return (
      <div>
        <p>Video Player</p>
        <button onClick={this.handleYouTubeClick}>Youtube</button>
        {this.state.isClicked && (
          <div>
            <ReactPlayer url="https://youtu.be/OXHCt8Ym9gw" />
          </div>
        )}
      </div>
    );
  }
}
export default YouTubePlayer;

这是解决您的问题的代码。

Answer 2

class YouTubePlayer extends Component {

    state = {
        showYoutube: false,
    }

    ShowPlayer = () => {
        if(this.state.showYoutube) {
                return (
                    <div>
                        <ReactPlayer url="https://youtu.be/OXHCt8Ym9gw"/>
                    </div>
                );
        }
    }

    handleYouTubeClick = () => {
        this.setState({
            showYoutube: true,
        })
    }

    render() {
        return ( 
            <div>
                <p>Video Player</p>
                <this.ShowPlayer />
                <button onClick={this.handleYouTubeClick}>Youtube</button>
            </div>
        );
    }
    
}

我希望这对您有帮助。
谢谢