1.安裝
npm install -g create-react-app
create-react-app 文件名
cd 文件名
npm install antd-mobile --save
路由跳轉(zhuǎn) npm install react-router --save
localhost:3000 打開瀏覽器
2 語法注意
(1)添加class名,react必須使用className添加
(2)想對(duì)標(biāo)簽添加樣式有三種方法
行內(nèi)樣式 如: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)添加事件
點(diǎn)擊事件(1)onClick={this.handleClick.bind(this,參數(shù),參數(shù))}
使用時(shí)注意:hangleClick(參數(shù),參數(shù),e){}
其他事件和vue沒有什么區(qū)別
(4)由于是單頁面所以在使用計(jì)時(shí)器時(shí),路由跳轉(zhuǎn)時(shí)要清除計(jì)時(shí)器不然會(huì)報(bào)錯(cuò)
(5)變量的處理
定義時(shí)使用 state={變量名:變量值}
改變變量時(shí) 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: 設(shè)置初始值,
})}
value={this.state.namess}
onChange={this.onChange}
>
</InputItem>
</form>
);
}
}
test = createForm()(test);
export default test
填充數(shù)據(jù)
填充數(shù)據(jù)前引入數(shù)據(jù)放在componentWillMount 里面祥山，componentWillMount 是render前渲染，這時(shí)dom還沒渲染，用this.setState({變量:數(shù)據(jù)})
關(guān)于table
獲取的數(shù)據(jù)不能直接賦值給table苇本，直接的話會(huì)報(bào)錯(cuò)唉俗，首先我們要給他們賦值不同的key值
const dataSource = [{
key: '1',
name: '胡彥斌',
age: 32,
address: '西湖區(qū)湖底公園1號(hào)'
}, {
key: '2',
name: '胡彥祖',
age: 42,
address: '西湖區(qū)湖底公園1號(hào)'
}];
const columns = [{
title: '姓名',
dataIndex: '變量名',//變量名不能重復(fù)吃靠，不然會(huì)報(bào)錯(cuò)
key: 'name',
}, {
title: '年齡',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}];
<Table dataSource={dataSource} columns={columns} />
這樣就可以了一個(gè)table就形成了蔑滓，當(dāng)然我們可能會(huì)有一些操作直接如下就可以了
const columns = [{
title: '姓名',
dataIndex: '變量名',//變量名不能重復(fù)憨闰，不然會(huì)報(bào)錯(cuò)
key: 'name',
render：(text, record) =>
<span>
<a href="javascript:;">{record.'變量名}</a>
<div onClick={this.onclickhand.bind(this,參數(shù))}>Delete</div>
</span>
}];
onclickhand=(參數(shù),e)=>{}
引入頁面跳轉(zhuǎn)路徑
在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;
