React练习 4 ：点击将 div 变为红色

Posted 2020-11-21 sx00xs

 

简要：原作为使用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‘)
);