高阶组件，prop-render模式，动画组件，reactspring

实现动画效果的Spring组件，必须每次都要渲染。保证Spring组件一直都被渲染，
（Spring组件一旦被销毁就没办法实现动画效果了）
所以就曲线救国了spring组件每次都渲染，只是在组件内部来决定返回的ui结构

/**
   * 渲染遮罩层div
   */
  renderMask = () => {
    
    
    const {
    
     openType } = this.state;
    const isHiden = openType === 'more' || openType === '';
      return (
        <Spring
        from={
    
    {
    
     opacity: 0}}
        to={
    
    {
    
     opacity: isHiden ? 0 : 1}}
      >
        {
    
    (styles) => {
    
    
          console.log('styles', styles.opacity.animation.to)
          if(styles.opacity.animation.to) {
    
    
            return null
          }
          return (<animated.div
            style={
    
    styles}
            className={
    
    styles1.mask}
            onClick={
    
    () => {
    
    
              this.onCancel(openType);
            }}
          ></animated.div>)
        }}
      </Spring>
      )
    // if(openType == "area" || openType == "mode" || openType == "price") {
    
    
    //   return (
    //     <Spring
    //     from={
    
    { opacity: 0, color: "red" }}
    //     to={[
    //       { opacity: 1, color: "#ffaaee" },
    //       { opacity: 1, color: "rgb(14,26,19)" },
    //     ]}
    //   >
    //     {(styles) => {
    
    
    //       console.log('styles',styles)
    //       return (<animated.div
    //         style={styles}
    //         className={styles1.mask}
    //         onClick={() => {
    
    
    //           this.onCancel(openType);
    //         }}
    //       ></animated.div>)
    //     }}
    //   </Spring>
    //   )
    // }else {
    
    
    //   return null
    // }
    // <div className={styles.mask} onClick={()=> {this.onCancel(openType)}} />
  };