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

目录

• 一、父组件向子组件传递数据
• 1.1、父组件代码
• 1.2、子组件代码
• 二、子组件向父组件传输数据
• 2.1、父组件代码
  
• 2.2、子组件代码
  

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

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

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

父组件向子组件传递数据是通过在父组件中引用子组件时，在子组件标签设置传输数据的属性；而子组件中通过 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 父组件和子组件的数据传输的详细内容，更多关于React 父组件和子组件的数据传输的资料请关注其它相关文章！

• 关于React Native报Cannot initialize a parameter of type''NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)
• react基础知识总结
• 详解React中key的作用
• react入门级详细笔记

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！