以下關於React的props屬性的內容介紹都是我個人理解：

在react當中，我們常說的單向資料流值的說法，其實說的就是props屬性，最常見的props用法就是元件之間的通訊---父元件向子元件傳值。

並且，props本身是不可逆的，具有隻讀性，也就是說它不能修改自己本身，傳什麼值，它就只能接受什麼值，並不能修改傳遞過來的值。

下面我們來看一下，父元件是如何向子元件傳值的：

子元件：

import React, { Component } from 'react';
import './App.css';

class Home extends Component {
    constructor(props){
        super(props);        
    };
  render() {
    return (
      <div className="Home">
             

 {this.props.name}     
      </div>
    );
  }
}

export default Home;
父元件：

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

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            num: 90
        }          
    };
  render() {
    return (
      <div className="App">
            

<Home name="raeam" />          
      </div>
    );
  }
}

export default App;
從上面的例子來看，我來解釋一下，在React當中，父元件是如何向子元件傳值的；

大致分為幾步：

第一步：首先我們要定義父元件和子元件且分清，誰是父元件、誰是子元件，

第二步：如果父元件和子元件不在同一個檔案中，需要把子元件引入到父元件所在的檔案當中：

import Home from './Home';

如果在同一個檔案當中，就無需引用；

第三步：這一步講的就是我們該如何使用引入過來的子元件呢？

<Home name="raeam" />          

其實，就是上面這個用法，把它當作一個元件來用，其實它本身就是一個元件。

接下來就是講如何傳值呢？

首先我們要在引入過來的子元件上去自定義一個屬性，比如name，接著就是我們要把傳入子元件的值寫入到name屬性中：

<Home name="raeam" />   

從上面這個我們就可以看到，"raeam"這個值就是我們父元件要傳給子元件的值。

第四步：從第三步我們瞭解到，我們在引入的子元件上通過自定義的name屬性，已經把父元件的值傳遞給了子元件，

那麼接下來，我們要做的就是，如何去接收父元件傳遞過來的值，這裡就要用到props屬性了，它的作用就是接收傳值，

 {this.props.name}  

這樣，就接收到父元件傳遞過來的值了，其中，this.props.name中props後面的name就是在父元件當中，同過在子元件上自定義的name屬性。

接下來，我要講的就是如何把父元件中，state中的值傳遞給子元件呢？

父元件：

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

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            num: 90,
            xv: 100
            
        } 
        this.handleClick = this.handleClick.bind(this);            
    };
    handleClick(){
        
        this.setState({
            num: this.state.num + 1,
            
        })
    };
  render() {
    return (
      <div className="App">
       {this.state.num}
             <Home name="raeam" git={this.state.num} dnf={this.state.xv}/>
             <button onClick={this.handleClick}>點選</button>             
      </div>
    );
  }
}

export default App;
子元件：

import React, { Component } from 'react';
import './App.css';

class Home extends Component {
    constructor(props){
        super(props);      
    };
  render() {
    return (
      <div className="Home">
               {this.props.name}     
               {this.props.git}     
               {this.props.dnf}     
      </div>
    );
  }
}

export default Home;