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

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 (
      

        
 Message: {this.state.msg}
        
      
    );
  }
}
export default App;

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(
            

                
{this.props.name}
                
{this.props.age}
                点击
            
        )
    }
}
export default Child;

{this.props.name}
{this.props.age}

class App extends Component {
......
    callback=(msg,name,age)=>{
        // setState方法,修改msg的值,值是由child里面传过来的
        this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  render() {
    return (
      

        
      
    );
  }
}
export default App;

class Child extends React.Component{
......
    change=()=>{
        this.props.callback(this.state.msg,this.state.name,this.state.age);
    }
    render(){
        return(
            

                点击
            
        )
    }
}
export default Child;