如何在 React 中隐藏/显示地图函数中的特定部分？

Question

我有一个列出歌曲的页面。每首歌都有一些信息和视频（song.link）。我希望每首歌曲都有一个按钮来隐藏/显示每个视频。通过添加“假？”在“ReactPlayer”组件的前面和其末尾的“：null”我可以隐藏它。但我不知道如何通过带有变量的按钮来实现它。

import React,{Component,useState} from 'react';
import ReactPlayer from "react-player";
import './bootstrap.min.css';

export class Song extends Component{

    constructor(props){
        super(props);
        this.state={songs:[]};
    }

    refreshList(){
        fetch(process.env.REACT_APP_API+"song")
        .then(response=>response.json()) 
        .then(data=>{
            this.setState({songs:data});
        });
    }

    componentDidMount(){
        this.refreshList();
    }

    componentDidUpdate(){
        
    }

    render(){
        const {songs}=this.state;
        
        return(
            <div className="container col-20">
                    <tbody>
                        {songs.map(song=>(
                            <tr key={song.id}>
                            <div className="row turn">
                                <div className="jumbotron col-4">
                                <tr>{song.name}</tr>   
                                <tr>{song.lyricsby}</tr>
                                <tr>{song.musicby}</tr>
                                <tr>{song.lyrics}</tr>
                                <tr>{song.albumName}</tr>
                                <button>Hide/Show Video</button> 
                                </div>
                                <div className="jumbotron col-8">
                                    <div className="mt-0 d-flex justify-content-right">
                                    {
                                    false?
                                    <ReactPlayer
                                        url={song.link}
                                    />:null}
                                    </div>
                                </div>
                            </div>
                            </tr>
                        ))}
                    </tbody>
            </div>
        )
    }
}

Answer 1

您需要绑定控制 ReactPlayer 渲染的“false”，并将 setState 添加到按钮 onClick 来切换布尔值