React中---"props" 及 父组件如何向子组件传值(组件通讯-父传子)

如下关于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;