React练习 15：02_09_单一按钮显示隐藏

在线效果浏览

需求：点击按钮显示/隐藏歌曲列表

解析：切换class

import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Playlist(){
    const [isOpen,setOpen]=useState(true);
    const [styles,setStyles]=useState({display:'block'});
    const handleClick=function(isOpen,styles){
        setOpen(!isOpen);
        var newstyles={};
        newstyles.display= styles.display==='none' ? 'block' : 'none';
        setStyles(newstyles);
        
    }
    return(
        

            
handleClick(isOpen,styles)}>播放列表...
            

                
玩家之徒 - 蔡依林
                
原谅我就是这样的女生 - 戴佩妮
                
猜不透 - 丁当
                
自导自演 - 周杰伦
                
浪漫窝 - 弦子
                
流年 - 王菲
            
        
    );
}

ReactDOM.render(
    ,
    document.getElementById('root')
)