sep25th

antd ProBreadcrumb 阻止部分面包屑点击

为什么要阻止点击？

左侧导航栏一般分为多级，

多级的第一级是不存在的。

她只有自己的子集，

也只能显示自己的子集，

因此我们期望在点击第一级时，

不触发跳转。

   
const handleBreadcrumbClick = (route: any, first: boolean) => {
  if (route.path && first) {
    // 第一个链接禁用点击
    return false;
  }
    // 其他链接可点击
  return history.push(route.path);
};

<ProBreadcrumb
  itemRender={(route, params, routes, paths) => {
    const isfirstRoute = route === routes[0];
    return isfirstRoute ? (
      <span onClick={() => handleBreadcrumbClick(route, isfirstRoute)}>
        {route.breadcrumbName}
      </span>
    ) : (
      <a onClick={() => handleBreadcrumbClick(route, isfirstRoute)}>
        {route.breadcrumbName}
      </a>
    );
  }}
 />

精度转化函数

概念：

后端返回的数据为一个json，

json需要反序列化为正常的js数据类型。

但在js中比较大的数字显示在浏览器上的时候会丢失精度，

因此我们需要再接受到数据的时候，

对数据进行遍历，

对较大的数字转化为字符串。

最终页面上使用的是经过转化后的响应对象。

为什么后端不转？

是的，

一般而言，

遇到比较大的数字的情况统一都是后端来转的，

也比较方便。

这里不转的原因是，

内部原因，

后端就是不转，

无法...

一些问题：

之前所采用的转化方法

const paraseValue = JSONbig.parse(json);

在部署到线上后会导致 source[key]?.constructor.name === BIGNUMBER 判断不对，

因此无法正确处理应该转换的大数字。

JSONbig.parse(json);会将转换的大数字转化为D构造函数（BigNumber.js最底层的实现），

会使项目多处使用了id的位置报错。

原因：

为什么线下可以正常运行，

线上不能正常转换？

很可能和线上的打包发布配置、环境有关，

无法真正彻查问题出现的真正原因。

暂时使用 JSONbigNative 转换的方式，

原因以后再深究。

import JSONbig from 'json-bigint';
var JSONbigNative = require('json-bigint')({ useNativeBigInt: true });

const BIGNUMBER = 'BigNumber';
const OBJECT = 'object';

const json =
  '{ "value" : 9223372036854775807, key: 00000000000000000000000000000000,"v2": 123, "data": [{"name": "恐虐", "items": [{"id": 92233720368547758079, "project_no": 137145186, "child": [{"otherId": 123456891234556789}]}]}] }';

// convert large interger to string type
export const conVersionDeep = <T extends Record<string, any>>(source: T) => {
  const map = new WeakMap();

  function deepContent(source: T) {
    if (source === null) {
      return null;
    }
    if (typeof source !== OBJECT) {
      return source;
    }
    if (source?.constructor === Date) {
      return new Date(source);
    }
    if (source?.constructor === RegExp) {
      return new RegExp(source);
    }

    if (map.get(source)) {
      return map.get(source);
    }

    const currentItem = (source?.constructor === Array ? [] : {}) as Record<string, any>;
    map.set(source, currentItem);
    for (const key in source) {
      if (
        source[key] &&
        typeof source[key] === OBJECT &&
        source[key]?.constructor?.name !== BIGNUMBER
      ) {
        currentItem[key] = deepContent(source[key]);
      } else {
        changeBigNumber(currentItem, source, key);
      }
    }
    return currentItem;
  }
  return deepContent(source);
};

const changeBigNumber = <P, U>(currentItem: P, source: U, key: string) => {
  if (typeof source[key] === 'bigint') {
    currentItem[key] = source[key].toString();
  } else {
    currentItem[key] = source[key];
  }
  
  // 之前有问题的实现
  // if (
  //   source[key]?.constructor.name === BIGNUMBER ||
  //   source[key]?.prototype?._isBigNumber ||
  //   source[key]?._isBigNumber
  // ) {
  //   console.log('需要转化的字段', source[key]);
  //   currentItem[key] = source[key].toString();
  // } else {
  //   currentItem[key] = source[key];
  // }
};

export const parseJsonData = (json: string) => {
   // 之前有问题的实现
   // const paraseValue = JSONbig.parse(json);
  const paraseValue = JSONbigNative.parse(json);
  return conVersionDeep(paraseValue);
};