Day05 state 及 props 的應用


這次試著建立一個 Counter.js 在 src 目錄,將 Counter 的組件獨立成一個檔案:

import React, { Component } from 'react';

class Counter extends Component {

    state = {
        count: 0
    }

    addCount = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.addCount}>+1</button>
            </div>
        );
    }
}

export default Counter;

請注意:檔名字首依然是大寫。
如果是 VSCode 的使用者,推薦 Reactjs code snippets 套件,打 rc 按下 tab 即可產出一個組件 code。

如果嘗試著在 index.js 那段,呼叫 Counter 組件時,給予一個初始值 10,怎麼做?

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Counter from './Counter'

ReactDOM.render(<Counter initial={10} />,
                    document.getElementById('root'));

那 Counter 這邊接受 initial 可以透過 props 的方式,不過由於 Function 都在 Counter 這邊,所以可以 React 內建的 constructor 函式來建立,:

class Counter extends Component {

    constructor(props){
        super(props)
        this.state = {
            count: props.initial
        }
    }

    addCount = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.addCount}>+1</button>
            </div>
        );
    }
}
  1. constructor 是 React 的生命週期函式(後面會提到),目前只要記得 constructor 是該物件被呼叫建立時,可以在裡面做什麼事,而我們在這建立的時間點,將 constructor 的參數 props,也就是與父組件溝通的橋樑進行拿值。
  2. super 就是指的是這個組件,通常 constructor(props)都搭配 super(props)來進行初始化作業,關於 superconstructor 可以參考這篇,講得非常清楚。

現在已經可以透過父組件給予的初始值,讓子組件使用,那如果今天父組件不給值,不就會造成所謂的錯誤嗎?可以透過子組件設定的預設值,也就是即使父組件不給值,還是能有一個值能給子組件使用:

class Counter extends Component {

    static defaultProps = {
        count: 10
    }

    constructor(props){
        super(props)
        this.state = {
            count: props.initial
        }
    }

    addCount = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.addCount}>+1</button>
            </div>
        );
    }
}

static 被稱作靜態方法,也代表該方法並不會被繼承。

那如果父組件傳的值,誤傳字串?

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Counter from './Counter'

ReactDOM.render(<Counter initial={10} />,
                    document.getElementById('root'));

可以發現 Counter 組件在使用時,遵循 JavaScript 的規則, "10" + 1 = 101,可以在 constructor 進行轉換:

    constructor(props){
        super(props)
        this.state = {
            count: parseInt(props.initial)
        }
    }

總結

這篇主要提到了 父子組件之間的一些溝通方式,在父組件呼叫子組件,不只是可以把值、方法傳入給子組件使用,當狀態及方法都在子組件時,父組件依然可以透過屬性的方式將初始值給帶入給子組件使用。

#React
React 七天寫作松
透過短短的七天,稍微把我對 React 的見解整理成七天份的文章,希望能對正在初學 React 的你有所幫助!






Related Posts

GraphQL Summit 2019 與會分享

GraphQL Summit 2019 與會分享

#STM32與sensor開發紀錄

#STM32與sensor開發紀錄

Python -「快速」算出兩排序數列中重複的次數

Python -「快速」算出兩排序數列中重複的次數



Comments