工作中遇到的问题总结

╰+攻爆jí腚メ 2022-06-10 14:30 335阅读 0赞

1：页面中的元素显示或者隐藏会触发页面的滚动监听事件。

.parent {
      height: 100%;
      overflow: scroll;
    }
    .child {
      background-color: red;
      height: 1000px;
    }
    .load {
      width: 100%;
      height: 50px;
      background-color: #f0f;
    }
    <div class="parent">
      <div class="child"></div>
      <p class="load">加载更多。。。</p>
    </div>
    <script>
      setInterval(function() {
        $('.load').toggle();
      }, 200);
      var scrollStopf = function(contain) {
        evt = new CustomEvent('scrollStop', {
          bubbles: true,
          cancelable: true
        });
        contain.dispatchEvent(evt);
      };
      window.addEventListener('scrollStop',function(){
        console.log(123);
      });
      window.addEventListener('scroll', function(e){
        scrollStopf(this);
      });
    </script>

2:在ios手机上点击链接时会出现半透明的灰色背景  
将下面的属性的透明度置成0即可，因为在ios上该属性有一个默认值。

-webkit-tap-hightlight-color:rgba(0, 0, 0, 0);

子元素定义的margin不能把父元素的高度撑起来，这个时候可以用BFC解决。

4:React.cloneElement

React.cloneElement用来克隆ReactElement，返回一个新的元素。
    以下用法是等价的：
    React.cloneElement(
      element,
      props,
      children
    );
    
    <element.type {...element.props} {...props}>{children}</element.type>

5:React.children

React.Children提供了一些工具函数来处理this.props.children。
    包括：React.Children.map React.Children.forEach React.Children.count React.Children.only React.Children.toArray

this.props.children是组件props的隐藏属性，它的值是一个数组，
    数组元素为ReactElement。

8:禁用package-lock.json

在.npmrc文件中配置 
    package-lock=false