<div id="root"></div>
<script type="text/babel">
let bool=true;
let Mycom=(props)=>{
   return(
   <div style={{display:bool?"block":"none"}}>
         {
          props.arr.map((v,i)=>{
           return <p key={i}>{v}</p>   //map遍历后面要return输出
            })
         }     
   </div>
    )
}
let heros=["伽罗","黄忠","米莱迪","典韦","凯","明世隐","蔡文姬","甄姬"];
let Com=()=>{
    return(
        <div>
            <h1 onClick={()=>{bool=!bool;render()}}>点击查看或隐藏英雄池</h1>  //每次点击的时候，bool的值与bool现状相反
            <Mycom arr={heros} />
        </div>
        )
    }
   
function render(){
   ReactDOM.render(<Com />,document.getElementById("root"));
    
}
render()
</script>

直接在文本框里面手动打，没有用编辑器，踩了个坑，<div>忘了封口，怎么调试怎么错，粘贴回编辑器才发现错误。