react学习总结

1.安装
npm install -g create-react-app
create-react-app 文件名
cd 文件名
npm install antd-mobile --save
路由跳转 npm install react-router --save
localhost:3000 打开浏览器
2 语法注意
(1)添加class名,react必须使用className添加
(2)想对标签添加样式有三种方法
行内样式 如:style={{background:'red',margin:'4px'}}
外部样式 引入样式如:import styles from "../../assets/css/housemanage/customerdetail.css";


外部样式 直接引入到index.html中

(3)添加事件
点击事件(1)onClick={this.handleClick.bind(this,参数,参数)}
使用时注意:hangleClick(参数,参数,e){}
其他事件和vue没有什么区别
(4)由于是单页面所以在使用计时器时,路由跳转时要清除计时器不然会报错
(5)变量的处理
定义时使用 state={变量名:变量值}
改变变量时 this.setState({
变量名:改变后的值
})
(6)form表单
由于react ant design 没有form表单,所以需要安装插件:rc-form
引入方式
import React from 'react';
import { InputItem} from 'antd-mobile';
import { createForm } from 'rc-form'; //引入方式
class test extends React.Component {
submit=()=>{
this.props.form.validateFields((err, values) => {
console.log(values)
})
}
render() {
const { getFieldProps } = this.props.form;
return (

{...getFieldProps('变量名', {
initialValue: 设置初始值,
})}
value={this.state.namess}
onChange={this.onChange}
>


);
}
}
test = createForm()(test);
export default test
填充数据
填充数据前引入数据放在componentWillMount 里面,componentWillMount 是render前渲染,这时dom还没渲染,用this.setState({变量:数据})
关于table
获取的数据不能直接赋值给table,直接的话会报错,首先我们要给他们赋值不同的key值
const dataSource = [{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}];

const columns = [{
title: '姓名',
dataIndex: '变量名',//变量名不能重复,不然会报错
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}];


这样就可以了一个table就形成了,当然我们可能会有一些操作直接如下就可以了
const columns = [{
title: '姓名',
dataIndex: '变量名',//变量名不能重复,不然会报错
key: 'name',
render:(text, record) =>

{record.'变量名}
Delete


}];
onclickhand=(参数,e)=>{}
引入页面跳转路径
在router.js中如下:
import addRote from "./components/authorization/addRote";
class routers extends React.Component{
render(){
return(






)
}
}
export default routers;

你可能感兴趣的:(react学习总结)