以下關於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;