工作中遇到的问题总结

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);

3:

子元素定义的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

7:

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

8:禁用package-lock.json

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