React父子元件傳值(元件通訊)的實現方法

2022-05-18 16:00:34

1、父元件傳值子元件

在參照子元件的時候傳遞，相當於一個屬性，例如：在子元件內通過porps.param獲取到這個param的值。

父元件向子元件傳值，通過props，將父元件的state傳遞給了子元件。

父元件程式碼片段：

constructor(props){
    super(props)
    this.state={
      message:"i am from parent"
    }
  }
  render(){
    return(
          <Child txt={this.state.message}/>
    )
  }
}

子元件程式碼片段：

render(){
    return(
          <p>{this.props.txt}</p>
    )
}

完整範例

建立父元件 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import User from './User';//引入子元件
 
//定義資料
const person = {
    name: 'Tom',
    age:20
}
 
ReactDOM.render(
    //渲染子元件，並向子元件傳遞name,age屬性
    <User name={person.name} age={person.age}></User>
    , document.getElementById('root'));

建立子元件 User.js

import React from 'react';
 
class User extends React.Component{
    render(){
        return (
            // 使用props屬性接收父元件傳遞過來的引數
            <div>{this.props.name}，{this.props.age}</div>
        );
    }
}
 
export default User;

在父元件中可以使用展開運運算元 ... 傳遞物件

index.js檔案

ReactDOM.render(
    //渲染子元件，並向子元件傳遞name,age屬性
    <User {...person}></User>
    , document.getElementById('root'));

User.js檔案

render(){
   return (
       // 使用props屬性接收父元件傳遞過來的引數
       <div>{this.props.name}，{this.props.age}</div>
   );
}

2、子元件傳值父元件

子元件通過呼叫父元件傳遞到子元件的方法向父元件傳遞訊息的。

完整案例

子元件 Son.js 檔案程式碼範例：

import React from 'react';
 
class Son extends React.Component {
    //構造方法
    constructor(){
        super();
        this.state = {
            inputValue:''
        }
    }
    //按鈕點選事件
    handleClick(){
        //通過props屬性獲取父元件的getdata方法，並將this.state值傳遞過去
        this.props.getdata(this.state.inputValue);
    }
    //輸入框事件，用於為this.state賦值
    handleChange(e){
        this.setState({
            inputValue: e.target.value
        });
    }
 
    render(){
        return (
            <React.Fragment>
                <input onChange={this.handleChange.bind(this)}></input>
                <button onClick={this.handleClick.bind(this)}>點選獲取資料</button>
            </React.Fragment>
        );
    }
 
}
 
export default Son;

父元件 Parent.js 檔案程式碼範例：

import React from 'react';
import Son from './Son';
 
class Parent extends React.Component {
    //構造方法
    constructor(){
        super();
        this.state = {
            mess: '' //初始化mess屬性
        }
    }
    //用於接收子元件的傳值方法，引數為子元件傳遞過來的值
    getDatas(msg){
        //把子元件傳遞過來的值賦給this.state中的屬性
        this.setState({
            mess: msg
        });
    }
 
    render(){
        return (
            <React.Fragment>
                {/* 渲染子元件，設定子元件存取的方法，
                getdata屬性名為子元件中呼叫的父元件方法名 */}
                <Son getdata={this.getDatas.bind(this)}></Son>
                <div>展示資料：{this.state.mess}</div>
            </React.Fragment>
        );
    }
 
}
 
export default Parent;

入口檔案 index.js範例程式碼：

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
 
ReactDOM.render(<Parent></Parent>, document.getElementById('root'));

3、兄弟元件傳值

兄弟元件之間的傳值，是通過父元件做的中轉，流程為：

元件A -- 傳值 --> 父元件 -- 傳值 --> 元件B

程式碼範例：

建立 Acls.js 元件，用於提供資料

import React from 'react';
 
class Acls extends React.Component {
    //按鈕點選事件，向父元件Pcls.js傳值
    handleClick(){
        this.props.data("hello...React...");
    }
 
    render(){
        return (
            <button onClick={this.handleClick.bind(this)}>Acls元件中獲取資料</button>
        );
    }
}
 
export default Acls;

建立父元件 Pcls.js 用於中轉資料

import React from 'react';
import Acls from './Acls';
import Bcls from './Bcls';
 
class Pcls extends React.Component {
    //建構函式
    constructor(){
        super();
        this.state = {
            mess: ''
        }
    }
    //向子元件Acls.js提供的傳值方法，引數為獲取的子元件傳過來的值
    getDatas(data){
        this.setState({
            mess: data
        });
    }
 
    render(){
        return (
            <React.Fragment>
                Pcls元件中顯示按鈕並傳值：
                <Acls data={this.getDatas.bind(this)}></Acls>
                <Bcls mess={this.state.mess}></Bcls>
            </React.Fragment>
        );
    }
}
 
export default Pcls;

建立子元件 Bcls.js 用於展示從 Acls.js 元件中生成的資料

import React from 'react';
 
class Bcls extends React.Component {
 
    render(){
        return (
            <div>在Bcls元件中展示資料：{this.props.mess}</div>
        );
    }
}
 
export default Bcls;

到此這篇關於React父子元件傳值(元件通訊)的實現方法的文章就介紹到這了,更多相關React父子元件傳值內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

React父子元件傳值(元件通訊)的實現方法

目錄

1、父元件傳值子元件

2、子元件傳值父元件

3、兄弟元件傳值

熱門文章