<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>忘了封口,怎么调试怎么错,粘贴回编辑器才发现错误。