1、定义变量式
const Vdom=(
<div>
我是虚拟Dom内容,定义时注意大写
</div>)
//挂载并渲染
ReactDOM.render(<Vdom>,document.querySelector("app"))
2、函数式组件
function Dom(){
console.log(this)
return (
<div>
<h2>这是函数DOM</h2>
<p>DOM的根节点必须为标签</p>
<p>this指向为严格模式下的undefined</p>
</div>
)
}
ReactDOM.render(<Dom/>,document.querySelector("app"))
3、类式组件
class person extends React.Component{
state={gender:true}
render(){
return <div>
<p>你是男是女?</p>
<p>{this.state.gender?'男':'女'}</p>
<button onClick={this.changeGender}>转换</button>
</div>
}
changeGender()=>{
//不明白这里的gender不能变
const gender=this.state.gender
//setState内只能是对象
this.setState(
{
gender:!gender
}
)
}
}