React 從入門到進階之路（八）

之前的文章我們介紹了 React中的元件、父子元件、React props父元件給子元件傳值、子元件給父元件傳值、父元件中通過refs獲取子元件屬性和方法。接下來我們將介紹 React propTypes  defaultProps。

  之前我們已經根據 create-react-app 模組建立了一個 React 專案，並定義 App.js 為根元件，即父元件，Home.js 為子元件。我們看一下兩個元件的程式碼：

App.js

import React, {Component} from 'react';
import Home from './components/Home';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "I am father",
            age: 30,
            info: "I like React",
        }
    }

    render() {
        return (
            <div className="App">
                <Home title={this.state.title} age={this.state.age}/>
            </div>
        );
    }
}

export default App;

Home.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "zhangsan",
        }
    }

    render() {
        return (
            <div>
                <p>Hello {this.state.name}</p>

                {/*父元件將 title 傳過來*/}
                {/*輸出結果：I am father*/}
                <p>{this.props.title}</p>

                {/*父元件將 age 傳過來，在下面的 defaultProps 中再重新定義*/}
                {/*父元件將 age 傳過來，在下面的 propTypes 定義 age 必須為 number 型別*/}
                {/*輸出結果：30*/}
                <p>{this.props.age}</p>

                {/*父元件沒有將 info 傳過來，在下面的 defaultProps 中定義*/}
                {/*輸出結果：I like React too*/}
                <p>{this.props.info}</p>
            </div>
        );
    }
}

Home.defaultProps = {
    age: 60,
    info: "I like React too",
}

Home.propTypes = {
    age: PropTypes.number
}

export default Home;

在父元件 App.js 中，通過 <Home /> 將子元件 Home 掛載到父元件 App 上，然後將 title 和 age 傳遞給子元件。

在子元件 Home 中，我們通過 this.props 屬性來獲取父元件 App 傳遞過來的值，但是我們在子元件 Home 中定義了一個 defaultProps 屬性，並宣告瞭 age 和 info 變數。

在輸出結果中我們可以看出：

　　如果在子元件的 defaultProps 屬性中沒有更改父元件傳遞過來的值，那麼將按父元件傳遞過來的值輸出，

　　如果在子元件的 defaultProps 屬性中更改了父元件傳遞過來的值，那麼還是按父元件傳遞過來的值輸出，

　　如果父元件並沒有傳遞過來某值，但是在子元件的 defaultProps 屬性中定義了該值，那麼將按照定義的值輸出。

 

在子元件 Home 中我們還通過 import PropTypes from ‘prop-types’; 引入了 PropTypes 模組，並定義了一個 propTypes 屬性定義了一個 age: PropTypes.number 的約束，那麼如果父元件傳遞過來的 age 如果不是 number 型別的話，則會在控制檯報錯。

 

結論：

defaultProps:父子元件傳值中，如果父元件呼叫子元件的時候不給子元件傳值，可以在子元件中使用defaultProps定義的預設值

propTypes：驗證父元件傳值的型別合法性

最後的結果為：