React父子組件傳值(組件通信)的實現(xiàn)方法

更新時間：2022年05月18日 14:49:23 作者：柯曉楠

本文主要介紹了React父子組件傳值(組件通信)的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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>
    )
}

完整示例

創(chuàng)建父組件 index.js

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

創(chuàng)建子組件 User.js

import React from 'react';
 
class User extends React.Component{
    render(){
        return (
            // 使用props屬性接收父組件傳遞過來的參數(shù)
            <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屬性接收父組件傳遞過來的參數(shù)
       <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)}>點擊獲取數(shù)據(jù)</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屬性
? ? ? ? }
? ? }
? ? //用于接收子組件的傳值方法，參數(shù)為子組件傳遞過來的值
? ? getDatas(msg){
? ? ? ? //把子組件傳遞過來的值賦給this.state中的屬性
? ? ? ? this.setState({
? ? ? ? ? ? mess: msg
? ? ? ? });
? ? }
?
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <React.Fragment>
? ? ? ? ? ? ? ? {/* 渲染子組件，設置子組件訪問的方法，
? ? ? ? ? ? ? ? getdata屬性名為子組件中調用的父組件方法名 */}
? ? ? ? ? ? ? ? <Son getdata={this.getDatas.bind(this)}></Son>
? ? ? ? ? ? ? ? <div>展示數(shù)據(jù)：{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

代碼示例：

創(chuàng)建 Acls.js 組件，用于提供數(shù)據(jù)

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組件中獲取數(shù)據(jù)</button>
? ? ? ? );
? ? }
}
?
export default Acls;

創(chuàng)建父組件 Pcls.js 用于中轉數(shù)據(jù)

import React from 'react';
import Acls from './Acls';
import Bcls from './Bcls';
?
class Pcls extends React.Component {
? ? //構造函數(shù)
? ? constructor(){
? ? ? ? super();
? ? ? ? this.state = {
? ? ? ? ? ? mess: ''
? ? ? ? }
? ? }
? ? //向子組件Acls.js提供的傳值方法，參數(shù)為獲取的子組件傳過來的值
? ? 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;

創(chuàng)建子組件 Bcls.js 用于展示從 Acls.js 組件中生成的數(shù)據(jù)

import React from 'react';
?
class Bcls extends React.Component {
?
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <div>在Bcls組件中展示數(shù)據(jù)：{this.props.mess}</div>
? ? ? ? );
? ? }
}
?
export default Bcls;

到此這篇關于React父子組件傳值(組件通信)的實現(xiàn)方法的文章就介紹到這了,更多相關React父子組件傳值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解
這篇文章主要為大家介紹了詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
React Hook中useState更新延遲問題及解決
這篇文章主要介紹了React Hook中useState更新延遲問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
React Native 啟動流程詳細解析
這篇文章主要介紹了React Native 啟動流程簡析,文以 react-native-cli 創(chuàng)建的示例工程（安卓部分）為例，給大家分析 React Native 的啟動流程，需要的朋友可以參考下
2021-08-08
React實現(xiàn)Excel文件的導出與在線預覽功能
這篇文章主要為大家詳細介紹了如何利用?React?18?的強大功能,演示如何使用?React?18?編寫?Excel?文件的導出與在線預覽功能,需要的小伙伴可以參考下
2023-12-12
記一個React.memo引起的bug
memo可以自己決定是否更新，但它是一個函數(shù)組件而非一個類，本文主要介紹了React.memo引起的bug，具有一定的參考價值，感興趣的可以了解一下
2022-03-03
React腳手架config-overrides.js文件的配置方式
這篇文章主要介紹了React腳手架config-overrides.js文件的配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解基于React.js和Node.js的SSR實現(xiàn)方案
這篇文章主要介紹了詳解基于React.js和Node.js的SSR實現(xiàn)方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
淺談React組件之性能優(yōu)化
這篇文章主要介紹了淺談React組件之性能優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
React?useEffect異步操作常見問題小結
本文主要介紹了React?useEffect異步操作常見問題小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
詳解react-router-dom v6版本基本使用介紹
本文主要介紹了react-router-dom v6版本基本使用介紹，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03