元件通訊

• 元件是獨立封閉的單元
• 一個完整的頁面通常是由多個元件組合而成的
• 元件之間經常需要共享一些資料，所以就需要元件之間能夠通訊

props

• props 用於接收外界向元件中傳遞的資料

實現方法：

• 渲染元件時，在元件標籤中使用自定義屬性向元件內部傳遞資料
• 元件內部可以使用 props 來接收自定義屬性傳遞的資料
  • 函式元件： props
  • 類元件： this.props

注意事項：

• 除了字串之外，其他型別的資料都需要使用 {}
• props 是只讀屬性，不能修改裡面的資料
• 使用類元件時，如果寫了建構函式，則需要將 props 傳遞給 super()，否則在 constructor 中無法使用props （其他方法可以使用）

類元件中接收自定義屬性中的資料

類元件方式1：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
  render () {
    return (
      <div>
        大家好，我叫{this.props.name},今年{this.props.age}歲
      </div>
    )
  }
}

ReactDOM.render(<App name='zs' age={18} />,document.querySelector('#app'))

元件內部會議物件形式將資料儲存在props屬性中

this.props = {
	name:'zs',
	age: 18
}

呼叫元件時，使用自定義屬性將資料傳遞到元件內部
this.props.name this,props.age

類元件方式2：

如果寫了建構函式，則需要將props傳遞給super(),否則在constructor中無法使用props(其他方法可以使用)

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
  constructor (props) {
    super(props)
    //console.log(this.props)
  }
  render () {
    return (
      <div>
        大家好，我叫{this.props.name},今年{this.props.age}歲
      </div>
    )
  }
}

ReactDOM.render(<App name='zs' age={18} />,document.querySelector('#app'))

函式元件中接收自定義屬性中的資料

import React from 'react'
import ReactDOM from 'react-dom'

const App = (props) => {
  reyurn (
      <div>
        大家好，我叫{props.name},今年{props.age}歲
      </div>
  )
}

ReactDOM.render(<App name='zs' age={18} />,document.querySelector('#app'))

父子元件巢狀

在一個元件中可以巢狀另一個元件，外層的元件就是父元件，內層的元件就是子元件

實現方法： 父元件的== render 方法==中呼叫子元件

import React from 'react';
import ReactDOM from 'react-dom';

import './assets/css/fs.css'

// 建立子元件
class Son extends React.Component {
  render () {
    return (
      <div className="son">我是子元件</div>
    )
  }
}

// 建立父元件
class Father extends React.Component {
  render () {
    return (
      <div className="father">
        <div>我是父元件</div>
        {/* 父元件在render方法中渲染子元件 */}
        <Son />
      </div>
    )
  }
}

ReactDOM.render(<Father />, document.querySelector('#app'))

父向子傳值

父元件渲染子元件時，將state中的資料新增到子元件的自定義屬性中

實現要點：

1. 父元件要有state，內部儲存準備傳遞給子元件的資料
2. 父元件呼叫子元件時，為子元件新增自定義屬性，將 state 中的資料設定為屬性的值
3. 子元件中使用props接收父元件資料

import React from 'react'
import ReactDOM from 'react-dom'
import './assets/css/fs.css'

// 目標: 子元件接收到父元件的資料

class Son extends React.Component {
  render () {
    return (
      <div className="son">
        我是子元件<br />
        {/* 子元件使用 props 來接收父元件資料 */}
        接收到父元件的資料為: {this.props.name} - {this.props.age}
      </div>
    )
  }
}

class Father extends React.Component {
  state = {
    name: '二狗子',
    age: 8
  }
  render () {
    return (
      <div className="father">
        我是父元件
        {/* 父元件在呼叫子元件時，將資料通過自定義屬性傳遞給子元件 */}
        <Son name={this.state.name} age={this.state.age} />
      </div>
    )
  }
}

ReactDOM.render(<Father />, document.querySelector('#app'))