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']