怎么在React中實(shí)現(xiàn)父組件和子組件的數(shù)據(jù)傳輸

怎么在React中實(shí)現(xiàn)父組件和子組件的數(shù)據(jù)傳輸？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

一、父組件向子組件傳遞數(shù)據(jù)

父組件向子組件傳遞數(shù)據(jù)是通過(guò)在父組件中引用子組件時(shí)，在子組件標(biāo)簽設(shè)置傳輸數(shù)據(jù)的屬性；而子組件中通過(guò) this.props 接受傳過(guò)來(lái)的數(shù)據(jù)；這樣就實(shí)現(xiàn)了父組件向子組件的數(shù)據(jù)傳輸。

1.1、父組件代碼

import React, { Component } from 'react';
import './App.css';
import Child from './child'
class App extends Component {
    constructor(props){
        super(props);
        this.state={
            msg:'父類的消息',
            name:'John',
            age:99
        }
    }
    callback=(msg,name,age)=>{
        // setState方法,修改msg的值,值是由child里面?zhèn)鬟^(guò)來(lái)的
        this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  render() {
    return (
      <div className="App">
        <p> Message: {this.state.msg}</p>
        <Child callback={this.callback} age={this.state.age} 
name={this.state.name}></Child>
      </div>
    );
  }
}
export default App;

代碼說(shuō)明：父組件在使用子組件（Child）的過(guò)程中，對(duì)子組件傳輸了兩個(gè)屬性（age和name）和一個(gè)方法(callback 先不考慮)。

關(guān)鍵代碼：

<Child name={this.state.name} age={this.state.age}></Child>

1.2、子組件代碼

import React from "react";
class Child extends React.Component{
    constructor(props){
        super(props);
        this.state={
            name:'Andy',
            age:31,
            msg:"來(lái)自子類的消息"
        }
    }
    change=()=>{
        this.props.callback(this.state.msg,this.state.name,this.state.age);
    }
    render(){
        return(
            <div>
                <div>{this.props.name}</div>
                <div>{this.props.age}</div>
                <button onClick={this.change}>點(diǎn)擊</button>
            </div>
        )
    }
}
export default Child;

代碼說(shuō)明：子組件中在 render 中直接使用 this.props 接受父組件傳輸?shù)臄?shù)據(jù)，并直接使用。不推薦子組件將接受到的數(shù)據(jù)，再使用this.setSate 方式處理。

關(guān)鍵代碼：

<div>{this.props.name}</div>
<div>{this.props.age}</div>

二、子組件向父組件傳輸數(shù)據(jù)

React 框架中子組件向父組件傳輸數(shù)據(jù)，要依賴于父組件向子組件傳輸數(shù)據(jù)。實(shí)際上就是父組件將自己作用域的函數(shù)傳輸給子組件；子組件調(diào)用該函數(shù)，并將要傳輸?shù)臄?shù)據(jù)，通過(guò)函數(shù)的參數(shù)的形式，傳輸給父組件。

2.1、父組件代碼

上面的代碼示例中，父組件中定義了函數(shù)，并將這個(gè)函數(shù)傳輸給了子組件。

class App extends Component {
......
    callback=(msg,name,age)=>{
        // setState方法,修改msg的值,值是由child里面?zhèn)鬟^(guò)來(lái)的
        this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  render() {
    return (
      <div className="App">
        <Child callback={this.callback}></Child>
      </div>
    );
  }
}
export default App;

父組件將自己作用域的函數(shù)傳遞給子組件，子組件在通過(guò) this.props 調(diào)用此函數(shù)的過(guò)程中，通過(guò)參數(shù)的方式將數(shù)據(jù)傳輸?shù)浇M組件中。
這里父組件有三個(gè)形參：msg,name,age；子組件將數(shù)據(jù)傳輸過(guò)來(lái)后，父組件會(huì)將其使用 this.setState 方式處理。

2.2、子組件代碼

子組件通過(guò)使用 this.props 接受到父組件傳輸過(guò)來(lái)的函數(shù)；并調(diào)用此函數(shù)通過(guò)參數(shù)的方法，傳輸數(shù)據(jù)給父組件。

class Child extends React.Component{
......
    change=()=>{
        this.props.callback(this.state.msg,this.state.name,this.state.age);
    }
    render(){
        return(
            <div>
                <button onClick={this.change}>點(diǎn)擊</button>
            </div>
        )
    }
}
export default Child;

子組件中創(chuàng)建了一個(gè)方法 change()，此方法和點(diǎn)擊事件 onClick 綁定；change() 方法中會(huì)調(diào)用 this.props.callback() 函數(shù)（父組件傳輸過(guò)來(lái)的函數(shù)）；函數(shù)的實(shí)參就是子組件傳輸給父組件的數(shù)據(jù)。

看完上述內(nèi)容，你們掌握怎么在React中實(shí)現(xiàn)父組件和子組件的數(shù)據(jù)傳輸?shù)姆椒藛?？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！