React Ant Design
目录
1. 基础配置
1.1 Node.js
内存溢出：npm run fix-memory-limit
https://www.cnblogs.com/jianxuanbing/p/9331042.html
1.1.1 安装
官网安装： https://nodejs.org/en/download/
国内镜像：https://pan.baidu.com/s/1kU5OCOB#list/path=%2Fpub%2Fnodejs
打开cmd ，输入node -v 查看是否安装 。
npm工具也会随node一起自动安装，使用npm -v 查看。
1.1.2 淘宝镜像cnmp
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
1.2 安装react
文档：https://react.docschina.org/docs/hello-world.html
npm install -g create-react-app yarn
create-react-app antd-demo
注意：
[1/4] Resolving packages...
[2/4] Fetching packages...
error eslint@6.1.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "10.8.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
解决方法：You can run CRA with `--use-npm` flag to force it to use npm. 例如create-react-app antd-demo --use-npm
1.3 引入Ant design的组件库
文档：https://ant.design/docs/react/introduce-cn
yarn add antd
2. React
受控组件
onChange() 控制用户后续输入发生时触发函数。
handleChange = (values) =>{
console.log(values);
}
<input type="text" value='' onChange={this.handleChange} />标签
textarea <textarea>会用value属性，定义它的文本内容。
<textarea value={this.state.value} onChange={this.handleChange} />select <select>创建一个下拉列表。
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
</select>React.Component
通过继承React.Component抽象基础类，并至少定义一个render()方法。
class Demo extends React.Component{
constructor(props){
super(props);
this.state = {
value : 111
};
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}export default Demo装配
-
constructor()在装配之前被调用React组件的构造函数。构造函数是初始化状态的合适位置。 -
componentWillMount()在装配发生前被立刻调用。其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲。（可以进行数据初始化） -
componentDidMount()在组件被装配后立即调用。 -
render()必须。一般页面<div>、表单等都是在这编写
其他API
-
setState()需要改变的变化存放到组件的state对象中，采用队列处理。（可能是批处理或推迟更新） -
forceUpdate()当你的组件或状态发生改变，你的组件将会重渲
实例属性
3. Ant Design
Dropdown
当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 菜单是否禁用 | boolean | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例 | Function(triggerNode) | () => document.body |
| overlay | 菜单 | Menu | - |
| placement | 菜单弹出位置：bottomLeft bottomCenterbottomRight topLeft topCenter topRight | String | bottomLeft |
| trigger | 触发下拉的行为 | Array<click|hover|contextMenu> | ['hover'] |
| visible | 菜单是否显示 | boolean | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - |
代码演示
render() {
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3rd menu item</a>
</Menu.Item>
</Menu>
);
<Dropdown.Button overlay={menu} disabled={false}>
<a className="ant-dropdown-link" href="#">
Cascading menu <Icon type="down" />
</a>
</Dropdown.Button>Select选择器
<Select
mode="tags" //设置 Select 的模式为多选或标签
style={{ width: '100%' }}
placeholder="请选择默认责任中心" //选择框默认文字
labelInValue
onFocus={this.defaultFocus} //获得焦点时回调
dropdownStyle={{ display: 'none' }} //下拉菜单的 style 属性
ref={ref => (this.defaultInput = ref)}
onDeselect={this.deleteSelect} //取消选中时调用
disabled={
this.props.form.getFieldValue('responsibilityCenterRange') == '2'
? true
: false
}
/>| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value, option:Option/Array<Option>) | - |
| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(value，option:Option) | - |
| onFocus | 获得焦点时回调 | function | - |
| mode | 设置 Select 的模式为多选或标签 | 'multiple' | 'tags' | |
| placeholder | 选择框默认文字 | string |
常用函数
Object.keys()
Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组
var data = { a: 1, b: 2, c: 9, d: 4, e: 5 };
console.log(data);//{a: 1, b: 2, c: 9, d: 4, e: 5}
console.log(Object.keys(data));//["a", "b", "c", "d", "e"]
Object.keys(data).map((key, item) => {
console.log(key, data[key]); //key=>属性名 data[key]=>属性值
});
forEach、filter、map、some、every、find、findIndex、reduce
| forEach | 批量遍历操作，对当前对象设置值，无返回值 | potatos.forEach(potato => potato.weight += 20 ) |
| map | 批量遍历操作，设置映射，有返回值 | w = potatos.forEach(potato => { return potato.weight += 20 }) |
| filter | 筛选过滤,返回一个满足条件新的对象数组，并不会改变原数组 | var bigOnes = potatos.filter(potato => { return potato.weight > 100 }) |
| some | 判断数组中有没有符合条件,不会全部遍历 | var hasbig = potatos.some(potato => { return potato.weight > 100 }) |
Object.keys(data).reduce((previousValue, currentValue, index, arr) => {
console.log(previousValue); //0 初始值或上一次回调函数叠加的值；
console.log(currentValue); // a 本次回调（循环）将要执行的值；
console.log(index); // 0 “currentValue”的索引值；
console.log(arr); // ["a", "b", "c", "d", "e"] 数组本身；
}, 0)