服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - React - 详解React 父组件和子组件的数据传输

详解React 父组件和子组件的数据传输

2022-02-28 16:16拾阶求上 React

这篇文章主要介绍了React 父组件和子组件的数据传输的相关资料,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下

在学习 React 框架组件间数据传输知识点前,我们需要先明确几点使用原则。

  1. React的组件间通讯是单向的。数据必须是由父级传到子级或者子级传递给父级层层传递。
  2. 如果要给兄弟级的组件传递数据,那么就要先传递给公共的父级而后在传递给你要传递到的组件位置。
  3. 这种非父子关系的组件间传递数据,不推荐使用这种层层传递的方式;而是选择使用维护全局状态功能模块(Redux)

一、父组件向子组件传递数据

父组件向子组件传递数据是通过在父组件中引用子组件时,在子组件标签设置传输数据的属性;而子组件中通过 this.props 接受传过来的数据;这样就实现了父组件向子组件的数据传输。

1.1、父组件代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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 先不考虑)。

关键代码:

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

1.2、子组件代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 方式处理。

关键代码:

?
1
2
<div>{this.props.name}</div>
<div>{this.props.age}</div>

二、子组件向父组件传输数据

React 框架中子组件向父组件传输数据,要依赖于父组件向子组件传输数据。实际上就是父组件将自己作用域的函数传输给子组件;子组件调用该函数,并将要传输的数据,通过函数的参数的形式,传输给父组件。

2.1、父组件代码

上面的代码示例中,父组件中定义了函数,并将这个函数传输给了子组件。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 接受到父组件传输过来的函数;并调用此函数通过参数的方法,传输数据给父组件。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 父组件和子组件的数据传输的详细内容,更多关于React 父组件和子组件的数据传输的资料请关注服务器之家其它相关文章!

原文链接:https://cn-blogs.cn/archives/9701.html

延伸 · 阅读

精彩推荐
  • React浅谈React Router关于history的那些事

    浅谈React Router关于history的那些事

    这篇文章主要介绍了浅谈React Router关于history的那些事,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们...

    这是上帝的杰作11952022-02-23
  • ReactReact.cloneElement的使用详解

    React.cloneElement的使用详解

    因为要接手维护一些项目,团队的技术栈最近从 vue 转向 react ,作为一个 react 新手,加上一向喜欢通过源码来学习新的东西,就选择了通过阅读 antd 这个大...

    fullstackbb11202022-02-23
  • ReactReact useMemo和useCallback的使用场景

    React useMemo和useCallback的使用场景

    这篇文章主要介绍了React useMemo和useCallback的使用场景,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下...

    woking4932022-02-25
  • React深入理解React Native核心原理(React Native的桥接(Bridge)

    深入理解React Native核心原理(React Native的桥接(Bridge)

    这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接(Bridge),本文重点给大家介绍React Native的基础知识及实现原理,需要的朋友可以参考下...

    Gavell9562022-02-23
  • ReactReact html中使用react的两种方式

    React html中使用react的两种方式

    这篇文章主要介绍了React html中使用react的两种方式,本文给大家提到了React pwa的配置代码,给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴...

    愚公搬代码6292022-02-23
  • Reactreact中常见hook的使用方式

    react中常见hook的使用方式

    这篇文章主要介绍了react中常见hook的使用方式与区别,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下...

    一颗冰淇淋8812022-02-25
  • React从框架作者角度聊:React调度算法的迭代过程

    从框架作者角度聊:React调度算法的迭代过程

    React内部最难理解的地方就是「调度算法」,不仅抽象、复杂,还重构了一次。可以说,只有React团队自己才能完全理解这套算法。既然这样,那本文尝试从...

    魔术师卡颂8172022-01-10
  • Reactreact-native 实现购物车滑动删除效果的示例代码

    react-native 实现购物车滑动删除效果的示例代码

    这篇文章主要介绍了react-native 实现购物车滑动删除效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    程序猿tx3892021-12-31