【打工日记】React drilldown
老板的要求：世界地图显示流行病数据，点击某个省进入钻取，获得这个省的下层数据
问题：老板现在所有的都写死了，并不是点击了某个省，然后获得这个省的标记，再获得这个省的数据
需要学的技术
Highmaps的driildown----https://www.cnblogs.com/DaBing0806/p/5080211.html
react/umi的运行流程、数据获取过程，如何进行增删改查
通过react进行的动态数据变化
react的运行状态下的函数内容
1. React基础语法
//React虚拟dom
//ReactDOM.render()
//React.createElment()
//React.Component
class HelloMessage extends React.component{
render(){//获得组件，进行渲染
return (
<div>
<Hello>this.props.name</Hello>
</div>
)
}
}
//加载主键
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById("hello-example")
)
2.jsx
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Document</title>
<!--引入框架库-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
.red{
color:red;
}
</style>
</head>
<!-- 1. 分大块 2.分区编写，渲染进大块里面-->
<body>
<div id="app"></div>
<script type="text/babel">
/*
var hello= React.createElement('h1',{
classname:'red',
name:"Season"
},"HelloWorld");//hello是要渲染的标签
*/
var time=new Date().toLocaleTimeString();
var ele= <div><h1 className="red" name="jack">Hello,jack</h1>
<h2>{time}</h2>
</div>;
ReactDOM.render(ele
,document.getElementById('app'));
</script>
</body>
</html>
3.函数调用
<script type="text/babel"> function tick() { var time=new Date().toLocaleTimeString(); var ele= <div><h1 className="red" name="jack">Hello,jack</h1> <h2>{time}</h2> </div>; ReactDOM.render(ele ,document.getElementById('app')); } setInterval(tick,1000); </script>
<script type="text/babel">
function Mello() {
return <h1>hello,Season</h1>;
}
ReactDOM.render(<Mello/>
,document.getElementById('app'));
</script>
函数名一定要大写
传递参数
function Mello(props) { return<div> <h1>hello,{props.name}</h1> <p>年龄：{props.age}</p> <p>擅长：{props.good}</p> </div> } ReactDOM.render(<Mello name="Season" age="18" good="Pingpong"/> ,document.getElementById('app'));
创建标准组件
//创建标准组件
class HelloSeason extends React.Component{
//带状态需要render（） 有状态的用this
render(){
return <div>
<h1>hello,{this.props.name}</h1>
<p>年龄：{this.props.age}</p>
<p>擅长：{this.props.good}</p>
</div>
}
}
ReactDOM.render(<HelloSeason/> //函数组件
,document.getElementById('app'));
3.React的生命周期
组件初始化、组件加载、数据更新、组件销毁
<script type="text/babel"> /* var hello= React.createElement('h1',{ classname:'red', name:"Season" },"HelloWorld");//hello是要渲染的标签 */ /* function tick() { var time=new Date().toLocaleTimeString(); var ele= <div><h1 className="red" name="jack">Hello,jack</h1> <h2>{time}</h2> </div>; }*/ function Mello(props) {//无状态的 return<div> <h1>hello,{props.name}</h1> <p>年龄：{props.age}</p> <p>擅长：{props.good}</p> </div> } //setInterval(tick,1000); //创建标准组件 class HelloSeason extends React.Component{ constructor(props){ console.log('初始化阶段') //初始化属性props super(props); //初始化黄台 this.state={ name:'jack', age:30, good:'inpd' } } componentWillMount(){ console.log('组件加载前') } componentDidMount(){ console.log('组件加载后') } //带状态需要render（） 有状态的可以用this render(){ //只要状态变化 一定会调用 console.log('组件加载或者数据更新') return <div> <h1>hello,{this.state.name}</h1> <p>年龄：{this.state.age}</p> <p>擅长：{this.state.good}</p> </div> } } ReactDOM.render(<HelloSeason /> // ReactDOM.render(<HelloSeason name="Season" age="18" good="Pingpong"/> //函数组件 ,document.getElementById('app')); </script>
4.
<script type="text/babel"> /* var hello= React.createElement('h1',{ classname:'red', name:"Season" },"HelloWorld");//hello是要渲染的标签 */ /* function tick() { var time=new Date().toLocaleTimeString(); var ele= <div><h1 className="red" name="jack">Hello,jack</h1> <h2>{time}</h2> </div>; }*/ function Mello(props) {//无状态的 return<div> <h1>hello,{props.name}</h1> <p>年龄：{props.age}</p> <p>擅长：{props.good}</p> </div> } //setInterval(tick,1000); //创建标准组件 class HelloSeason extends React.Component{ constructor(props){ console.log('初始化阶段'); //初始化属性props super(props); //初始化黄台 this.state={ name:'jack', age:30, good:'inpd' } } componentWillMount(){ console.log('组件加载前'); } componentDidMount(){ console.log('组件加载后'); } updateUser=()=>{ this.setState({ name:'Tim', age:32 }) } shouldComponentUpdate(){ console.log('数据是否需要更新'); return true; //表示数据需要更新 } componentWillUpdate(){ console.log('数据将要更新'); } componentDidUpdate(){ console.log('数据已经更新'); } //带状态需要render（） 有状态的可以用this render(){ //只要状态变化 一定会调用 console.log('组件加载或者数据更新'); return <div> <h1>hello,{this.state.name}</h1> <p>年龄：{this.state.age}</p> <p>擅长：{this.state.good}</p> <button onClick={this.updateUser}>更新数据</button> </div> } } ReactDOM.render(<HelloSeason /> // ReactDOM.render(<HelloSeason name="Season" age="18" good="Pingpong"/> //函数组件 ,document.getElementById('app')); </script>
5.绑定事件，加载js
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/javascript" href="js/jquery-1.8.0.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class TodoList extends React.Component{
state ={
val:'',
list:[]
}
handleInput =(event)=>{
this.setState({
val: event.target.value
})
}
handleAdd=()=>{
const val=this.state.val;
const list=this.state.list;
list.push(val);
this.setState({list})
}
/*const {val,list}=this.state;*/
render(){
const arr=this.state.list;
const val=this.state.val;
const listItem=[];
for (let i = 0; i < arr.length; i++) {
let li = <li>{arr[i]}</li>;
listItem.push(li);
}
return <div>
<div>
<input type="text" value={val} onChange={this.handleInput}/>
<button onClick={this.handleAdd}>Add</button>
</div>
<ul>
{listItem}
</ul>
</div>
}
}
ReactDOM.render(
<TodoList/>,
document.getElementById('app'));
</script>
</body>
</html>
6.AntDesign
import logo from './logo.svg';
import './App.css';
import { Input, Button,Select } from 'antd'
import 'antd/dist/antd.css'
import React from 'react';
const Search = Input.Search;
const Option = Select.Option;
class App extends React.Component {
//初始化数据，并展示
state = {
val: '',
list: []
}
handleChange = (event) => {//获得变化的数据，并更新
let val = event.target.value;
this.setState({
val
})
}
handleAdd = () => {//获得新数据
let { val, list } = this.state;
list.push(val);
this.setState({
list
})
}
handleSearch = (value) => {
//不需手动获得数据
let { list } = this.state;
list.push(value);
this.setState({
list
})
}
render() {
const { val, list } = this.state;
const options = [];
return <div>
<h1>HelloWorld!</h1>
<Input type="text" value={val} style={{ width: 300 }} onChange={this.handleChange} />
<Button onClick={this.handleAdd}>Add</Button>
<ul>
{list.map((item, index) => {
options.push(<Option key={index}>{item}</Option>)
return <li key={index}>{item}</li>
})}
</ul>
<div>
<Search
style={{ width: 300 }}
onSearch={this.handleSearch}
enterButton="Search"></Search> </div>
<div>
<Select style={{ width: 200 }} >
{options}
</Select>
</div>
</div>
}
}
export default App;
浙公网安备 33010602011771号