React-父子元件通訊-函數式元件

在了解父子元件通訊這個知識點的時候，首先要說明清楚一點内容就是什麼是父元件什麼是子元件，在上一篇 ​​React-元件開篇​​ 當中我們在 App.js 類元件當中使用到了其它的一些元件，那麼 App 就是父元件，被 App 所使用的就是子元件，了解了什麼是父子元件之後，介紹要來介紹一下它們之間該如何進行通訊，也就是傳遞資料和方法，父元件傳遞資料給子，子傳遞給父的這麼一個過程就是稱之為父子元件的通訊。

父元件傳遞函數式元件

傳遞方式非常的簡單就是在父元件使用子元件的地方，在子元件當中添加一些自定義的一些屬性，這樣就表示你要給某一個子元件傳遞一些資料，至于是什麼資料就看你自己了，在父元件當中傳遞了資料給子元件那麼在子元件當中該如何拿到對應的資料呢，在 React 當中它會把所有父元件傳遞的資料都放在一個 props 的對象當中，然後在傳遞給我們的子元件，由于我們的子元件是一個函數元件，是以它就會把 props 對象傳遞給構造函數，那麼它會傳遞給我們的構造函數我們就可以在函數的構造形參當中進行擷取了：

App.js:

import React from 'react';
import './App.css';
import Footer from "./components/Footer";
import Main from "./components/Main";
import Header from "./components/Header";

class App extends React.Component {
    render() {
        return (
            <div>
                <Header name={'BNTang'} age={18}/>
                <Main/>
                <Footer/>
            </div>
        )
    }
}

export default App;      

Header.js:

import React from 'react';
import './Header.css';

function Header(props) {
    console.log(props);
    return (
        <div className={'header'}>我是頭部</div>
    )
}

export default Header;      

子元件設定參數預設值

• 通過​

  ​defaultProps​

  ​，也就是說如果父元件沒給值，就使用預設值。
• 官方文檔：​​https://zh-hans.reactjs.org/docs/context.html​​

Header.js:

import React from 'react';
import './Header.css';

function Header(props) {
    console.log(props);
    return (
        <div className={'header'}>我是頭部</div>
    )
}

Header.defaultProps = {
    name: '小灰灰',
    age: 18
}

export default Header;      

App.js:

import React from 'react';
import './App.css';
import Footer from "./components/Footer";
import Main from "./components/Main";
import Header from "./components/Header";

class App extends React.Component {
    render() {
        return (
            <div>
                <Header/>
                <Main/>
                <Footer/>
            </div>
        )
    }
}

export default App;      

子元件中校驗參數類型

• 通過​

  ​propTypes​

  ​

通過 propTypes 之前首先得要安裝一下對應的依賴：

npm install prop-types      

官方文檔位址：​​https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html​​

Header.js:

import React from 'react';
import './Header.css';
import ReactTypes from 'prop-types';

function Header(props) {
    console.log(props);
    return (
        <div className={'header'}>我是頭部</div>
    )
}

Header.defaultProps = {
    name: '小灰灰',
    age: 18
}

Header.propTypes = {
    name: ReactTypes.string,
    age: ReactTypes.number
}

export default Header;      

App.js:

import React from 'react';
import './App.css';
import Footer from "./components/Footer";
import Main from "./components/Main";
import Header from "./components/Header";

class App extends React.Component {
    render() {
        return (
            <div>
                <Header name={'BNTang'} age={18}/>
                <Main/>
                <Footer/>
            </div>
        )
    }
}

export default App;      

如上都是正常給，來看一個不正常的如下：

<Header name={'BNTang'} age={'18'}/>