怎么在React中實現父組件和子組件的數據傳輸

怎么在React中實現父組件和子組件的數據傳輸？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

一、父組件向子組件傳遞數據

父組件向子組件傳遞數據是通過在父組件中引用子組件時，在子組件標簽設置傳輸數據的屬性；而子組件中通過 this.props 接受傳過來的數據；這樣就實現了父組件向子組件的數據傳輸。

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里面傳過來的
        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;

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

關鍵代碼：

<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:"來自子類的消息"
        }
    }
    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}>點擊</button>
            </div>
        )
    }
}
export default Child;

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

關鍵代碼：

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

二、子組件向父組件傳輸數據

React 框架中子組件向父組件傳輸數據，要依賴于父組件向子組件傳輸數據。實際上就是父組件將自己作用域的函數傳輸給子組件；子組件調用該函數，并將要傳輸的數據，通過函數的參數的形式，傳輸給父組件。

2.1、父組件代碼

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

class App extends Component {
......
    callback=(msg,name,age)=>{
        // setState方法,修改msg的值,值是由child里面傳過來的
        this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  render() {
    return (
      <div className="App">
        <Child callback={this.callback}></Child>
      </div>
    );
  }
}
export default App;

父組件將自己作用域的函數傳遞給子組件，子組件在通過 this.props 調用此函數的過程中，通過參數的方式將數據傳輸到組組件中。
這里父組件有三個形參：msg,name,age；子組件將數據傳輸過來后，父組件會將其使用 this.setState 方式處理。

2.2、子組件代碼

子組件通過使用 this.props 接受到父組件傳輸過來的函數；并調用此函數通過參數的方法，傳輸數據給父組件。

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}>點擊</button>
            </div>
        )
    }
}
export default Child;

子組件中創建了一個方法 change()，此方法和點擊事件 onClick 綁定；change() 方法中會調用 this.props.callback() 函數（父組件傳輸過來的函數）；函數的實參就是子組件傳輸給父組件的數據。

看完上述內容，你們掌握怎么在React中實現父組件和子組件的數據傳輸的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！