先输入全局安装
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;