props

props 是 React 中用來讓父元件傳遞參數到子元件中的物件，裡面包含了所有傳遞到子元件的屬性和值。使用方式就是在父元件中調用子元件時添加屬性來塞入參數即可，如下

// 在調用元件時，傳遞 props
<App isLoading={isLoading} />

而在子元件中去使用 props 時，class component 和 function component 的方式則不大一樣。class component 中，要透過 this.props 來進行調用

import React from 'react';

class App extends React.Component {
    render () {
        //調用 this.props
        const { loading } = this.props;
        return <div>
            { loading ? <div>...loading</div> : null }
        </div>
    }
}

<App isLoading={isLoading} />

在 function component 中，由於是用函式來產生元件，props 本身就是函式的參數，所以我們只要像平常寫函式一樣去使用 props 即可。

const App = (props) => {
    // 直接使用 props
    return <div>
        { props.loading ? <div>...loading</div> : null }
    </div>
}

<App isLoading={isLoading} />

props.children

props.children 是元件的一個屬性，是元件的子元素。如果我們在調用元件時，在元件標籤中有用巢狀再寫子元素，則必須要在父元件中去調用 props.children ，子元素才會顯示出來。

const App = (props) => {
    // 在元件中調用 `props.children`
    return <div>
        { props.children }
    </div>
}

// 這樣這邊添加的子元素才會顯示出來喔喔喔喔喔喔
<App>
    <div>在這邊使添加子元素</div>
</App>

React 元件間的參數傳遞方式

一般來說元件間會有以下幾種傳遞參數的方式

• 父元件向子元件傳遞
• 子元件向父元件傳遞
• 向其他元件傳遞

傳遞參數到子元件

React 中， props 傳遞是單向數據流的，也就是由父層往子層傳遞，傳送的方式就像前面介紹 props 的部分一樣，就不在多述。

傳遞參數到父元件

由於 props 只能由父元件往下傳遞給子元件，不能反向傳遞，因此無法直接用 props 來傳遞參數給父元件。但是我們能透過 callback 回調函數來向父層反向傳遞。如下面，我們在父元件 Form 中設定一個 onEditer 函式並傳遞給子元件，在子元件 Input 中再去調用 onEditer 並傳遞參數，透過這個 callback 傳遞參數給父元件。

class Form extends React.Component {
    state = {
        value: ''
    }
    
    onEditer (value) {
        this.setState({value})
    }
    
    render () {
        return <div>
            <Input onEditer={this.onEditer.bind(this)} />
        </div>
    }
}

//透過 callback 傳遞參數給父元件。
class Input extends React.Component {
    render () {
        const { onEditer } = this.props;
        return <div>
            <input type="text" onChange={e => onEditer(e.target.value)} />
        </div>
    }
}

傳遞參數到其他元件

這裡所謂的其他元件是指沒有上下關係(父子關係)的元件，以下面為例，Header、Content、Footer 三個元件之間沒有上下關係，就不能透過 props 來傳遞參數。

import React from 'react';

<App>
    <Header />
    <Content />
    <Footer />
</App>

如果要在這種情況下傳遞資料到其他元件，一般是透過 Context API 或其他第三方套件來做資料傳遞。

1. Context API：Context API 是 React 本身提供的一個資料狀態管理方式，利用全域的方式讓不同元件共享資料。
2. 做資料狀態管理的第三方套件 (redux, mobx, dva)：以第三方套件而言，大多都是透過下圖的方式來做資料管理，通常會有一個存放 state 資料的地方(store 之類)，不同元件可以共用這些 state，當需要改變資料狀態時，會呼叫第三方套件提供的方法去更新 state 中的資料狀態，當 state 更新後，會同步將資料更新到其他元件中。
   

小結

這一篇整理了 props 和元件間傳遞資料的方式，有關 Context API 及第三方套件管理資料的方式，會在之後的篇章中提到。