错误问题记录整理

当工程同时使用 add-module-exports 和 @babel/plugin-transform-modules-commonjs 这两个plugin的时候

"plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ],
    "add-module-exports",
    "@babel/plugin-transform-modules-commonjs"
  ]

在同一个文件中同时 export 和 export default 时，发现export出去的react组件丢失， 第三个页面import * as name from 'module' 的时候， name 中只有一个default , 没有其他组件。

解决方案就是：

"plugins": [
    ["@babel/plugin-transform-modules-commonjs", {"loose": true}]
  ]

当使用行内元素 span or display: inline 之后元素上下对不齐的时候， 需要使用一样的line-height 和 vertical-align 处理

.inline {
    line-height: @line-height__20;
    vertical-align: text-bottom;
}

组件传递数据，没有涉及加密，但是被报有安全问题，说是使用了弱加密的算法

解决方案： 组件名称Des和一个加密算法库重名了，属于误报。 尽量避免这种命名方式

Ios系统， version: 13.3.1 or 15.* ， 移动设备，Safari浏览器对react自组件的render没有正确更新，dom元素上正确更新，但是视觉效果上，页面中展示错误

{
    !expanded ?  <span>View more</span> : <span>View less</span>
}

解决方案： 在条件分支中使用不同type的dom或者key，去渲染。 原理：不让它去复用该DOM元素

{
    !expanded ?  <span key="more">View more</span> : <span key="less">View less</span>
}

内容区和底部栏的按钮发生了点击穿透，底部栏属于position: fixed定位，和内容区部分内容发生了重叠，点击Cancel button，选中了下面遮挡住的checkbox，但是button 自身的close事件并未触发。

解决方案：

1. 修改内容区的height，让其把底部栏的空间留出来，使之不会发生重叠。
2. 设置底部栏的z-index，让他的层级高于内容区。

原理： 最初想到的是事件机制： 捕获和冒泡，下层元素阻止了冒泡，所以上层的事件没有得到触发。但是，众所周知，事件是在冒泡阶段tigger的，这个冒泡有一个前提条件，就是元素自身属于父子层级，而不是通过position定位引发的上下重叠。所以，并不是事件机制，而是position 定位和z-index的问题导致。