子传父通信代码

先输入全局安装

npm install -g create-react-app

在输入

npx create-react-app aa创建项目

cd aa

npm start

（上机）父子通信（父传子，子传父）

子传父通信代码

import React from "react";

import Child from './Child'

class Parent extends React.Component{

    constructor(props) {

        super(props);

        this.state={

            msg:'这是父组件的消息',

            name:'父组件名字:john',

            age:'年龄:53'

        }

    }

    callbackAAA =(childmsg,childname,childage) => {

        this.setState({

            msg:childmsg,

            name:childname,

            age:childage

        });

    }

    render(){

        return(

            <div id="a">

                <p class="b"> Message:{this.state.msg}</p>

                <Child

                    callback={this.callbackAAA} 

                    childage={this.state.age} 

                    childname={this.state.name} ></Child>

            </div>

        );

    }

}

export default Parent;

import React from "react";

class Child extends React.Component{

    state ={

        childname:'子组件名字:hyh',

        childage:'子组件年纪:20',

        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;

父传子通信

（上机）路由（一级路由，二级路由）

npm install react-router-dom@5

一二级路由代码

Aa.js

import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

import Bb from "./Bb";

import Cc from "./Cc";

import Dd from "./Dd";

function Aa(){

    return (

    <Router>

        <div>

                <ul>

                    <li><Link to="/">Bb</Link></li>

                    <li><Link to="/Cc">Cc</Link></li>

                    <li><Link to="/Dd">Dd</Link></li>

                </ul>

            {/* 路由的切换点 */}

            <Switch>

                <Route path="/Dd"> <Dd /> </Route>

                <Route path="/Cc"> <Cc /> </Route>

                <Route path="/"> <Bb /> </Route>

            </Switch>

        </div>

    </Router>

);

}

export default Aa;

Bb.js

import React from 'react';

import {Link, Route, Switch} from "react-router-dom";

import Ee from "./Ee";

function Bb () {

    return (

        <div>

            <ul>

                <li><Link to="/Bb/Ee">eee</Link></li>

            </ul>

            <Switch>

                <Route path="/Bb/Ee"> <Ee /> </Route>

            </Switch>

        </div>

    );

}

export default Bb;

Cc.js

import React from 'react';

function Cc() {

    return (

        <div>

            <h1>Welcome to the cc Page</h1>

        </div>

    );

}

export default Cc;

Dd.js

import React from 'react';

function Dd (){

    return (

        <div>

            <h1>Welcome to the dd Page</h1>

            {/* 你可以在这里添加更多的内容，比如段落、列表等 */}

        </div>

    );

}

export default Dd;

Ee.js

import React from 'react';

function Ee() {

    return (

        <div>

            <h1>Welcome to the EE Page</h1>

        </div>

    );

}

export default Ee;

（上机）hook技术--查询天气（高德地图，记高德地图账户18325161489和密码huangyuhua920）

npm install axios

import './App.css';

import { useEffect, useState } from "react";

import axios from 'axios'; // 添加axios引入

function App() {

  const [weatherData, setWeatherData] = useState(null); // 修改变量名为weatherData

  const [selectedCity, setSelectedCity] = useState('');

  const [cityList, setCityList] = useState([]);

  const API_KEY = 'd449610e4ef2fb248bea310f0137ac01';

  useEffect(() => {

    const fetchCityList = async () => {

      try {

        const response = await axios.get('https://restapi.amap.com/v3/config/district', { // 修改API地址

          params: {

            key: API_KEY,

            subdistrict: 1,

          },

        });

        setCityList(response.data.districts[0].districts);

      } catch (error) {

        console.error('Error fetching city list', error);

      }

    }

    fetchCityList();

  }, []);

  useEffect(() => {

    const fetchWeather = async () => {

      if (selectedCity) {

        try {

          const response = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo', {

            params: {

              key: API_KEY,

              extension: 'base',

              city: selectedCity,

            },

          });

          setWeatherData(response.data.lives[0]); // 修改对象路径

        } catch (error) {

          console.error('Error fetching weather data:', error); // 修改打印信息

        }

      } else {

        setWeatherData(null);

      }

    };

    fetchWeather();

  }, [selectedCity]);

  const handleCityChange = (e) => {

    setSelectedCity(e.target.value);

  };

  return (

      <div className="App">

        <h1>天气信息</h1>

        <label htmlFor="citySelect">选择城市：</label>

        <select id="citySelect" value={selectedCity} onChange={handleCityChange}>

          <option value="">请选择城市</option>

          {cityList.map((city) => (

              <option key={city.adcode} value={city.adcode}>{city.name}</option> // 修改option标签内容

          ))}

        </select>

        {weatherData ? (

            <div>

              <p>城市: {weatherData.city}</p>

              <p>天气: {weatherData.weather}</p>

              <p>温度: {weatherData.temperature}℃</p>

            </div>

        ) : (

            <p>正在获取天气信息...</p>

        )}

      </div>

  );

}

export default App;