文件目录

正常版

  1. |— container
  2.         |— entity // 存储常量
  3.     |— hooks // 各种自定义的 hooks
  4.         |— useHooks1.js // hooks示例1
  5.             |— useHooks2.js // hooks示例1
  6.         |— index.js // hooks的主要出口
  7.     |— handler // 转换函数，以及不需要 hooks 的事件处理函数
  8.         |— handler1.js
  9.       |— handler2.js
  10.             |— index.js // handle的主要出口
  11.     |— component //组件
  12.       |— index.js
  13.       |— index.less
  14.     |— index.js // 主文件，只保留实现步骤
  15.     |— index.css // css 文件

简化版

  1. |— container
  2.         |— entity // 存储常量
  3.     |— hooks.js // 各种自定义的 hooks
  4.     |— handler.js // 转换函数，以及不需要 hooks 的事件处理函数
  5.     |— component // 子组件
  6.       |— handle.js
  7.       |— hooks.js
  8.       |— index.js
  9.       |— index.less
  10.     |— index.js // 主文件，只保留实现步骤
  11.     |— index.css // css 文件

主文件代码内容

主文件只保留业务步骤

  • 对 list 数据的操作
  • UI 渲染 ```javascript import React, { useState, useEffect } from ‘react’; import PropTypes from ‘prop-types’; import { Row, Select, } from ‘antd’; import { onChangeHandler } from ‘./handler’; import { useList } from ‘./hooks’; import Service from ‘@/services’;

const Demo = ({ onChange, value, version, }) => { // list 状态的操作，其中有搜索改变 list const [originList, list, onSearchHandler] = useList(version); // UI 组件渲染 return ( ); };

export default Demo;

  1. <a name="samUO"></a>
  2. ### handle.js文件内容
  3. ```javascript
  4. // 事件 handler
  5. export const onChangeHandler = (originList, data, onChange) => {
  6.   const val = originList.find(option => (option.id === data.value));
  7.   const item = { ...val, value: val.code, label: val.name };
  8.   onChange(item);
  9. };

借鉴文章地址https://mp.weixin.qq.com/s/QCnmGu5nnhTt6_O4Msk_Ow