iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
0
Modern Web

初探前端之路-React-由生到死的踩地雷系列 第 2

組件間通訊 this.state this.props refs

  • 分享至 

  • xImage
  •  

前言

當我們初入React後,最容易遇到的問題就是組件間的通訊,算是第一大魔王拉,目前也只能跌跌撞撞慢慢找出攻略法。

目前看到寫比較完整的文章
參考

state、props、refs

這是React的Component 的變數設定,大概就是說
state 是Component內部的變數
props 是外部傳進Component的變數
refs 是子組件傳給父組件時用的

常用的屬性:props, state, refs
state 和 props 同樣儲存資料,有什麼差別?

Example:

下面大概寫一下react 正規class 格式:
會在construtor(props){}裡面定義this.state 這個Component 要用到的變數
當然也有一種寫法state={"apple" : "" }這種比較精簡的寫法,

    class App extends React.Components{
        construtor(props){
            super(props)
            this.state = {
                "變數名稱":型態,
                "apple" : "" ,//字串
            }
        }
        
        render(){
            return(
                <Apple value={this.state.apple}/>
            )
        }
        
    }

而下面的 就是 class App 的子組件 如果我們要傳值給
value={this.state.apple}給他,而如果要接收變數格式大概像這樣:
可以先用console.log 查一下有沒有接收到值,

    class Appple extends React.Components{
        construtor(props){
            super(props)
           
            console.log(this.props.value)
        }
        
        render(){
            return(
               
            )
        }
        
    }

這大概是基本的state、props 觀念

父子組件間的通訊

OK 這就是重點,其實我們父子組件溝通通常沒什麼大問題,只要子組件不需要更新父組件傳過來的值的話

從我開始學到現在有做過幾種作法,

Refs

參考,這大概就是說 子組件逆回傳值給父組件,這個用法現在開始捨去掉了,這不符合React的撰寫風格
一般來說,React 設計通常都是從上到下的傳值,不可以逆推

格式:

<Input refs="Input"/>

而父組件大概就是用this.Input.value收值Input 就是refs="Input"

先在父組件設變數

這是我目前的寫法,
只要先把要溝通的變數先寫好,再用props去接收
更新的話我看過有一種寫法以前也試過
直接使用props.value 然後用 this.setState({value:this.props.value})去更新

這寫法比較怪,怪再說this.setState是用來更新this.state 而這個寫法好像就是說,我直接在子組件更新父組件的this.state.value(在父組件內value是.state)

另一種寫法是上面文章的作法
跟上一個寫法一樣觀念:只是setState是在父子間處理,而傳處理父值得function給子組件

父組件:
 transferMsg(msg) {
    this.setState({
      msg
    });
  }
  render(){
  
      return( <Child_1 transferMsg = {msg => this.transferMsg(msg)} />)
  }

  

子組件:
就直接把值傳進function 自然就更新了

this.props.transferMsg('end')

上一篇
為什麼我用:hover 滑鼠放在圖片邊緣會一直閃?
下一篇
瀑布流(Masonry layout)卡片排版
系列文
初探前端之路-React-由生到死的踩地雷10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言