Ant Design Pro最佳实践

带参数路由

 {
        name: 'product',
        icon: 'barcode',
        path: '/product',
        component: './Product/List',
      },
      {
        path: '/product/:id',
        hideInMenu: true, // # hide
        name: 'product-info',
        component: './Product/Info',
      },

请求返回后的回调

通过modal提交表单，POST成功之后需要有一个回调函数来关闭modal

model file (*.js)

*fetch({ payload, callback }, { call, put }) {
	// request here
	if (callback) callback() // ** 回调函数 **
})

page file (*.js)

this.props.dispatch({
	type: '***',
	payload: '***',
	callback: () => {
		// callback function
	}
})

一个页面，多个表单的处理

const CreateForm = Form.create()((props) => {
  const { form, onSubmit, } = props;
  const handleAdd = (e) => {
    e.preventDefault();
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      onSubmit(fieldsValue);
    });
  };
  return (
    // form item
  );
});

// 省略
return (
	<CreateForm onSubmit={this.handleSubmit} />
)

表格的最佳实践

columns避免写在render里面

class List extends React.Component {
  this.columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '描述',
      dataIndex: 'desc',
    },
    {
      title: '链接',
      dataIndex: 'url',
    },
  ];
  
  // ...
}

Select下拉加载更多

handleBrandPopupScroll = (e) => {
   e.persist();
   const { brandPage } = this.state;
   const { brand: { brandTotalPage } } = this.props;
   const target = e.target;
   if (target.scrollTop + target.offsetHeight === target.scrollHeight && (brandPage < brandTotalPage)) {
     // ajax
   }
}

//...

<Select onPopupScroll={this.handlePopupScroll}>
// Option
</Select>

数组操作

当拷贝一个数组的全部或者部分到一个新数组的时候，优先使用map和filter而不是forEach

• map

var items = [{
  id: 1,
  name: 'john'
}, {
  id: 2,
  name: 'jane'
}, {
  id: 2000,
  name: 'zack'
}];

var names = items.map(function(item) {
  return item['name'];
});

// names: ['john', 'jane', 'zack']