一、函數(shù)式組件

{/*- 定義組件的組件名 大寫- <組件名/> -- 單標簽的形式- 函數(shù)式組件沒有 this */}// 1. 定義組件名 大寫 function Demo() {return <h1>我是函數(shù)式組件</h1> }// 2. 將組件渲染到頁面 ReactDOM.render(<Demo/>, document.getElementById('test'));

二、類式組件

{/*創(chuàng)建類式組件class 組件名 extends React.Component{...}this 指向組件實例對象 */}class MyComponent extends React.Component {state = {name: 'mary'}render() {console.log(this);return <h1>我的名字是：{this.state.name}</h1>;} }// 2. 將組件渲染到頁面上 ReactDOM.render(<MyComponent/>, document.getElementById('test'));

總結(jié)

以上是生活随笔為你收集整理的react 组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。