本文轉(zhuǎn)載自微信公眾號「勾勾的前端世界」，作者西嶺 。轉(zhuǎn)載本文請聯(lián)系勾勾的前端世界公眾號。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比二道網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式二道網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋二道地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

截至到目前，我們已經(jīng)掌握了組件的概念、組件的傳值、以及組件狀態(tài)的相關(guān)內(nèi)容。有興趣的寶子可以翻看俺之前發(fā)布的內(nèi)容，筆芯。

你應(yīng)該發(fā)現(xiàn)了，我們學(xué)習(xí) React ，除了環(huán)境搭建和不多的 JSX 語法外，極大的篇幅都在學(xué)習(xí) React 中的數(shù)據(jù)流管理。

但是，我們在前面學(xué)習(xí)組件傳值時，一直都是將值從父級組件傳入子級組件中，從來沒有將子級組件的值傳入到父級組件，也沒有在多個兄弟組件間傳值。

而根據(jù)單向數(shù)據(jù)流的內(nèi)容推測，我們也不敢確定數(shù)據(jù)是否可以從子組件傳入父級組件。

為什么沒有在之前就說呢?因為我們的基礎(chǔ)知識掌握的還不夠，現(xiàn)在學(xué)完組件狀態(tài)，就可以了，那到底應(yīng)該怎么做呢?

組件數(shù)據(jù)傳遞

子組件向父組件傳值

我們先來看子級組件如何向父級組件傳遞數(shù)據(jù)：其本質(zhì)上就是使用回調(diào)函數(shù)。

具體怎么做呢?

父級組件引入子級組件后，在 JSX 中依然使用 Props 的方式，將提前寫好的父級組件的函數(shù)，傳入子級組件，在子級組件中使用 this.props 接收傳入的函數(shù)并調(diào)用，在函數(shù)的調(diào)用中，將需要出入父級組件的值，傳入函數(shù)調(diào)用的實參。

父組件：

 
 
 
 
  
  
  
  
import React, { Component } from 'react' 
  
  
  
  
import States from './States' 
  
  
  
  
 
  
  
  
  
export class App extends Component { 
  
  
  
  
  state = { 
  
  
  
  
    name:'lisi' 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  callBack = (req)=>{ 
  
  
  
  
    this.setState({name:req}) 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  render() { 
  
  
  
  
    return ( 
  
  
  
  
      
 
  
  
  
  
        
APP
 
  
  
  
  
        
{this.state.name}
 
  
  
  
  
        {/* 將父級組件中的函數(shù)，以 Props 的方式傳入子級組件 */} 
  
  
  
  
        {/* 子級組件調(diào)用函數(shù)，以回調(diào)函數(shù)的方式將子組件的值傳回給父級組件 */}