React练习 1 ：控制div属性

import React,{useRef} from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;


function Myinput(props){
  const handleClick=function(){
    const index=props.index;
    const item=props.item;
    const style=props.btns.current.style;
    switch(index){
      case 0:
        style.width=item.width;
        break;
      case 1:
        style.height=item.height;
        break;
      case 2:
        style.background=item.background;
        break;
      case 3:
        style.display=item.display;
        break;
      case 4:
        style.display=item.display;
        style.width=‘100px‘;
        style.height=‘100px‘;
        style.background=‘black‘;
        break;
    default:style.width=item.width;
    }
  };
  return(
    <input type="button" value={props.value} onClick={handleClick}/>
  );
}


function App(){
  const btns=useRef(null);
  const styles=[
    {width:‘200px‘,value:‘变宽‘},
    {height:‘200px‘,value:‘变高‘},
    {background:‘red‘,value:‘变色‘},
    {display:‘none‘,value:‘隐藏‘},
    {display:‘block‘,value:‘重置‘}
  ];
  

  const mybtns=styles.map(function(item,index){
    return <Myinput btns={btns} item={item} index={index} value={item.value} key={item.value}/>
  })

  return(
    <div className="outer">
      {mybtns}

      <div ref={btns} className="div1"></div>
    </div>
  );
}
ReactDOM.render(
  <App/>,
  document.getElementById(‘root‘)
);