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";
<div className={styles['class名']}></div>
外部样式 直接引入到index.html中
<div className='class名'></div>
(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 (
<form onSubmit={this.submit}>
<InputItem className={styles['fr']}
{...getFieldProps('变量名', {
initialValue: 设置初始值,
})}
value={this.state.namess}
onChange={this.onChange}
>
</InputItem>
</form>
);
}
}
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 dataSource={dataSource} columns={columns} />
这样就可以了一个table就形成了，当然我们可能会有一些操作直接如下就可以了
const columns = [{
title: '姓名',
dataIndex: '变量名',//变量名不能重复，不然会报错
key: 'name',
render：(text, record) =>
<span>
<a href="javascript:;">{record.'变量名}</a>
<div onClick={this.onclickhand.bind(this,参数)}>Delete</div>
</span>
}];
onclickhand=(参数,e)=>{}
引入页面跳转路径
在router.js中如下：
import addRote from "./components/authorization/addRote";
class routers extends React.Component{
render(){
return(
<div>
<Router history={appHistory}>
<Route path="/index/authorization/roteList/addRote" component={addRote} />
</Router>
</Router>
</div>
)
}
}
export default routers;