React父子通信

父子通信：

创建项目：npm install,npm create-react-app 项目名称

npx create-react-app 项目名称

npm install react-router-dom@5

父组件：

import child from "./child";
import React from "react";
import Child from "./child";
class Parent extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            msg:'这是父组件的信息',
            name:'父组件的名字Jack',
            age:99
        }
    }
    callbackAAA=(childmsg,childname,childage )=>{
        this.setState({
        msg:childmsg,
        name:childname,
        age:childage

    });

    }

    render() {
        return(
            <div>
                <p>
                    Message:{this.state.msg}
                </p>
                <Child callback={this.callbackAAA} childage={this.state.age} childname={this.state.name} childmsg={this.state.msg}></Child>
            </div>
        );
    }
}
export default Parent;

子组件：

import React from "react";
class Child extends React.Component{
    state={
        childname:'这是子组件的名字；ak',
        childage:18,
        childmsg:'这是来自子类的信息'
    }
    change=()=>{
        this.props.callback(this.state.childmsg,this.state.childname,this.state.childage);
    }
    render() {
        return(
            <div>
                <div>{this.props.childname}</div>
                <div>{this.props.childage}</div>
                <button onClick={this.change}>点击</button>
            </div>
        )
    }
}
export default Child;

渲染：

import React from 'react';
//import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client'; // 注意这里需要引入 'react-dom/client'
//import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// import Parent from './components/parent';
// import Components from "./components/MouseDiv";
// import Comments from  "./components/Comments";
 import Gaode from "./components/Gaode";
import TodoList from "./redux/TodoList";
import BrowserRouter1 from "./components/BrowserRouter1"
import Test from "./Test";
import Router from "./components/sy/Router/router";
import Login from "./components/sy/Login";
import Parent from "./components/parent";
/*const root = ReactDOM.createRoot(document.getElementById('root')); // 创建一个root
root.render(<Login />); // 使用这个root来渲染你的组件*/

// ReactDOM.render(<TodoListUi/>,document.getElementById('root'));

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Parent />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();