React练习 14：02_08_简易js年历

在线效果浏览

需求：日历，mouseover后会显示当月节日。

解析：设置state，注册mouseover事件，and so on...

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

function Calendar(props){
    const [arrs,setCalendar]=useState(props.arrs);
    const [mon,setMon]=useState(6);
    const [co,setCo]=useState('端午节：6月4日至6日放假3天。');

    const handleOver=function(id){
        for(var i=0;ifalse;
        arrs[id].isActive=true;
        setMon(arrs[id].id+1);
        setCo(arrs[id].message);
    };
    return(
        

            

                {arrs.map((item)=>
handleOver(item.id)}>{item.id+1}{item.val}

                )}
            
            

                

                    {mon}
                    月节日
                
                
{co}
            
        
    );
}

const arrs=calendar;


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