React-props基本應用

2019-08-05

React

基本應用

1.用props指定初始值

Counter.js

import React, {Component} from 'react';

class Counter extends Component{
    constructor(props){             //父層傳到子層的方法
        super(props);
        this.state= {
            num: props.initNum,     //父層傳到子層的屬性
        }
    }


    addNum = () => {
        this.setState({
            num: this.state.num + 1,
        })
    }


    render() {
        return(
            <div>
                <h1>{this.state.num}</h1>
                <button type="button" onClick={this.addNum}>+1</button>
            </div>
        )
    }
}

export default Counter;

index.js

import React from 'react';
import ReactDom from 'react-dom';
import Counter from './Counter'

ReactDom.render(<Counter initNum={10}/>, document.getElementById('root'))

initNum要傳到子層的屬性跟值，當沒有給予這個屬性和值的時候，用defaultProps指定預設值

有給予初始值，網頁呈現畫面

2.用defaultProps指定預設值(兩種方法)

第一種寫法(寫在class裡面)

Counter.js

import React, {Component} from 'react';

class Counter extends Component{
    static defaultProps = {         //指定initNum預設值為多少
        initNum: 5,
    }

    constructor(props){             //父層傳到子層的方法
        super(props);
        this.state= {
            num: props.initNum,     //父層傳到子層的屬性
        }
    }


    addNum = () => {
        this.setState({
            num: this.state.num + 1,
        })
    }


    render() {
        return(
            <div>
                <h1>{this.state.num}</h1>
                <button type="button" onClick={this.addNum}>+1</button>
            </div>
        )
    }
}

export default Counter;

第二種寫法(寫在class外面)

Counter.js

import React, {Component} from 'react';

class Counter extends Component{
    constructor(props){             //父層傳到子層的方法
        super(props);
        this.state= {
            num: props.initNum,     //父層傳到子層的屬性
        }
    }


    addNum = () => {
        this.setState({
            num: this.state.num + 1,
        })
    }


    render() {
        return(
            <div>
                <h1>{this.state.num}</h1>
                <button type="button" onClick={this.addNum}>+1</button>
            </div>
        )
    }
}

Counter.defaultProps = {        //指定initNum預設值為多少
    initNum: 5,
}

export default Counter;

index.js

import React from 'react';
import ReactDom from 'react-dom';
import Counter from './Counter'

ReactDom.render(<Counter/>, document.getElementById('root'))

當沒有給予屬性和值的時候，用defaultProps指定預設值

沒有有給予初始值，將以預設值(5)呈現，網頁呈現畫面

3.用propTypes檢查型別(兩種方法)

第一種寫法(寫在class裡面)

Counter.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';         //檢查型別需要載入此模組

class Counter extends Component{    //指定initNum預設值為多少
    static defaultProps = {
        initNum: 10,
    }
    static propTypes = {            //判斷型別是否為數字
        initNum: PropTypes.number,  
    }

    constructor(props){             //父層傳到子層的方法
        super(props);
        this.state= {
            num: props.initNum,     //父層傳到子層的屬性
        }
    }


    addNum = () => {
        this.setState({
            num: this.state.num + 1,
        })
    }


    render() {
        return(
            <div>
                <h1>{this.state.num}</h1>
                <button type="button" onClick={this.addNum}>+1</button>
            </div>
        )
    }
}

export default Counter;

第二種寫法(寫在class外面)

Counter.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';         //檢查型別需要載入此模組

class Counter extends Component{
    constructor(props){             //父層傳到子層的方法
        super(props);
        this.state= {
            num: props.initNum,     //父層傳到子層的屬性
        }
    }


    addNum = () => {
        this.setState({
            num: this.state.num + 1,
        })
    }


    render() {
        return(
            <div>
                <h1>{this.state.num}</h1>
                <button type="button" onClick={this.addNum}>+1</button>
            </div>
        )
    }
}

Counter.defaultProps = {            //指定initNum預設值為多少
    initNum: 10,
}

Counter.propTypes = {               //判斷型別是否為數字
    initNum: PropTypes.number,      
}

export default Counter;

index.js

import React from 'react';
import ReactDom from 'react-dom';
import Counter from './Counter'

ReactDom.render(<Counter initNum='10'/>, document.getElementById('root'))

檢查initNum型別，此時為字串，console會跳出錯誤提醒

initNum型別錯誤，網頁呈現畫面