React练习 4 :点击将 div 变为红色
简要:原作为使用for循环更改div的background来实现的。
此处使用三元操作符:点击按钮时,通过boolean来判断作为开关,添加类 new,实现同样的效果。
import React,{useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function ChangedivColor(props){ const [isRed,setRed]=useState(false); return( <> <button onClick={()=>setRed(true)}>点击将DIV变成红色</button> <div id="outer"> <div className={isRed ? 'new' : ''}></div> <div className={isRed ? 'new' : ''}></div> <div className={isRed ? 'new' : ''}></div> </div> </> ) } ReactDOM.render( <ChangedivColor/>, document.getElementById('root') );