React学习记三

antd-v4路由权限失效，原因似乎是因为某个插件升级导致。

解决方法：使用 npm install umi-plugin-keep-alive 解决权限失效问题。

封装组件

使用ts文件可以导出想要封装的原始属性和自定义的新属性

BasicInput.tsx

import { Input, InputProps, View } from '@tarojs/components';
import './index.scss';
import React, { ReactNode } from 'react';
import PropTypes from 'prop-types';
import { isNotNull } from '../../utils/pageUtils';

type IProps = InputProps & {
  title?: string,
  required?: boolean,
  extral?: any
};

const BasicInput: React.FC<IProps> = (props) => {
  const { title, required, extral } = props;

  return (
    <div className='basicInput'>
      {isNotNull(title) && required ? <div className='inputTitle'>{title}<span className='required'>*</span></div> : null}
      {isNotNull(title) && !required ? <div className='inputTitle'>{title}</div> : null}
      <Input
        className='inputContent'
        {...props}
      />
      {extral ? <div className='inputExtral'>{extral}</div> : null}
      <div className="bottomLine"></div>
    </div>
  )
}

BasicInput.propTypes = {
  title: PropTypes.string,
  required: PropTypes.bool,
  extral: PropTypes.any,
}

BasicInput.defaultProps = {
  required: false
}

export default BasicInput;

动态表格列

准备一个constants写上表格所有属性，此处写得复杂，因为要适配其他的功能

export const insuredPropTypes = {
  'name': { label: '姓名', show: true, fixed: 'left', name: 'name', url: `sunshineModels/editInsured`, render: null, canEdit: true },
  'idCard': { label: '身份证', show: true, fixed: 'left', name: 'idCard', url: `sunshineModels/editInsured`, render: null, canEdit: true },
  'phone': { label: '联系电话', show: true, fixed: null, name: 'phone', url: `sunshineModels/editInsured`, render: null, canEdit: true },
  'peopleType': { label: '人员类别', show: true, fixed: null, name: 'peopleType', url: `sunshineModels/editInsured`, render: null, canEdit: true },
  ...
}

便利所有表格属性并打上勾选框

{Object.getOwnPropertyNames(claimProps).map((key) => {
    return <Checkbox key={key} checked={claimProps[key].show} onChange={(e) => tabelHeaderVisiable(e.target.checked, key, 2)}>{claimProps[key].label}</Checkbox>;
})}

表格属性显示与隐藏，多个表格使用switch判断修改

const tabelHeaderVisiable = (flag, prop, index) => {
    let propsTemp;
    switch (index) {
      case 1:
        propsTemp = { ...insuredProps };
        propsTemp[prop].show = flag;
        setInsuredProps({ ...propsTemp });
        break;
      case 2:
        ...
      default: break;
    }
}

使用useMemo监听并渲染表格属性

const insuredTableColumns = useMemo(() => {
    const columns = [];
    ...
    return columns;
}, [insuredProps]);