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')
);