1. 函式元件

   // /src/index.js
   ...
   function Welcome (props) {
    return (
     <div>
      <h3>hello function component</h3>
      <span>{props.data}</span>
     </div>
     )
   }

宣告一個函式，以返回值的形式返回元件模板。如果要從父元件傳值進來的話，在函式上加一個props引數（props傳值部分會詳細介紹）

2. 以類的形式建立元件

   • 建立一個es6類，繼承 React.Component，類名就是你在父元件中引入的標籤名

   • 類中寫一個 render()，函式的返回值就是該元件的模板

   • 將上面的函式體放入render函式中

   • 在render()使用this.props可以獲取父元件傳過來的資料的引用

   class Welcome extends React.Component {
    render () {
     return (
      <div>
       <h3>hello class component</h3>
       <span>{this.props.data}</span>
      </div>
      )
     }
   }

宣告一個類繼承Welcome,在類裡面宣告要給render函式返回元件模板

總結：

• 自定義元件都要以大寫字母開頭。一般在react中，小寫字母開頭一般表示標籤,如<div />

• 元件中的標籤元素一定要有一個根標籤將它們包裹

3. props傳值：

   子元件不能直接修改父元件的資料，要通過觸發父元件的方法，讓父元件自己改資料（請看綜合練習1）

   props傳遞物件

const dataForm = { name: 'tina' }
const element = (
 <div>
  <Welcome dataForm={dataForm} />
 </div>
)

呼叫元件都是以下面的方式：

const element = (
 <div>
  <Welcome addr="黃岡" name="zhangsan" />
 </div>
)
ReactDom.render(element, document.getElementById('root'))
 

4. props驗證

5. 註釋的使用

   class Welcome extends React.Component {
    render () {
     // 這是在模板外面的註釋
     return (
      <div>
        {/**
         這是在模板中使用註釋
         */}
       <h3>hello class component</h3>
       <span>{this.props.data}</span>
       <span>{this.props.obj.name}</span>
      </div>
      )
     }
   }

當在模板中使用註釋，要用{}將註釋包裹起來，代表js語法，否則就會報錯；

當在模板外外面使用註釋，就和在js檔案總寫註釋方式一樣

練習：

1. 在子元件中改變父元件的狀態

   // ChildToFa.jsx
   import React from 'react'
   ​
   export default class ChildToFaDemo extends React.Component {
    changeProps (data) {
     console.log(this, data)
     this.props.changeData(data)
     }
   ​
    render () {
     return (
      <div>
       <p>{this.props.data}</p>
       <button onClick={this.changeProps.bind(this, '子元件的資料')}>修改</button>
      </div>
      )
     }
   }

   // App.jsx
   import React from 'react'
   import ChildToFaDemo from './ChildToFa'
   ​
   export default class App extends React.Component {
    constructor () {
     super ()
     this.state = {
      data: '父元件的資料'
      }
     }
   ​
    changeData = (data) => {
     this.setState({
      data
      })
     }
   ​
    render () {
     return (
      <div>
       <ChildToFaDemo data={this.state.data} changeData={this.changeData} />
      </div>
      )
     }
   }

   知識點：

   如何解決事件處理函式中的this指向和傳參問題

   // wrong
   <button onClick={this.changeProps('子元件的資料')}>修改</button> // 這種方式會直接執行changeProps函式，且this指向undefined
   ​
   // right: bind第一個引數是函式中this的指向；後面的引數是要傳遞給函式的
   <button onClick={this.changeProps.bind(this, '子元件的資料')}>修改</button>

   子元件中改變父元件中的資料： 通過this.props.changeData()觸發父元件中的方法-前提條件是父元件有把這個方法傳給子元件