React中---"props" 及 父組件如何向子組件傳值(組件通訊-父傳子)

如下關於React的props屬性的內容介紹都是我我的理解:css

在react當中,咱們常說的單向數據流值的說法,其實說的就是props屬性,最多見的props用法就是組件之間的通訊---父組件向子組件傳值。react

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

下面咱們來看一下,父組件是如何向子組件傳值的:this

子組件:spa

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;


父組件:code

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當中,父組件是如何向子組件傳值的;it

大體分爲幾步:class

第一步:首先咱們要定義父組件和子組件且分清,誰是父組件、誰是子組件,import

第二步:若是父組件和子組件不在同一個文件中,須要把子組件引入到父組件所在的文件當中:引用

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;
相關文章
相關標籤/搜索