1 . 函数式组件
function Childom( props ){
// props 打印结果就是{tianqi:'天气'}
let title=<h2>我是副标题</h2>
let tianqi=props.tianqi
let isGo=tianqi=="下雨"?"不出门" :"出门"
return (
<div>
<h1>这是一个函数组件</h1>
{title}
<div>
是否出门 {isGo}
</div>
</div>
)
}
// 在这可以传参,
ReactDOM.render(<Childom tianqi="下雨"/>,document.getElementById('root'))
2 . 类组件
class HellowWorld extends React.Component{
render(){
console.log(this)
// { props:'下雨'}
return(
<div>
<h1>这是一个类组件</h1>
</div>
)
}
}
ReactDOM.render(<HellowWorld tianqi="下雨" />,document.getElementById('root'))
3 . 复合组件--组件中又有组件
网友评论