开发就绪

1. clone项目到本地后，需要npm install..但是一般都要先按照公司的npm镜像
2. react中可以用ref属性来获取dom节点。。所以要在在使用ref属性时先判断该节点是否存在
3. 在react语法的js文件中添加样式，是这样子的

<div   stye={{ textAlign: ‘center’, color: ‘red’ } }></div>

4.一般需要用到state的采用类组件形式写组件，因此对于无状态组件用函数的形式

类组件定义： class Com extends Component { 。。。 }        export default Com;  
无状态组件定义： export default function Com(props){ let info = props.info; }

5.图片大小溢出盒子的范围，一开始设置盒子的overflow属性为hidden，图片是不溢出了，但是盒子的右边和下边的边框被图片占着了。后来发现盒子的宽高比例和图片的宽高比例一致，这样就可以直接为img设置 style={{ width: '100%', height: '100%' }}。成功！
6.获取事件位置&&获取元素位置

el. getBoundingClientRect();  //该方法返回的对象中有top,left,right,bottom,width,heigh等6个属性
e.screenX,  e.clientX   handle(event){}

7.组件生命周期

constructor:所有关于组件自身的状态的初始化工作
componentWillMount:一些组件启动的动作，包括像 Ajax 数据的拉取操作、一些定时器的启动等
componentDidMount:
componentWillReceiveProps(nextProps)：组件从父组件接收到新的 props 之前调用。
componentWillUpdate()：组件开始重新渲染之前调用。
componentDidUpdate()：组件重新渲染并且把更改变更到真实的 DOM 以后调用。

8.React中为某个元素绑定了一个点击事件跳转到另一个链接，为什么还没点击这个元素，就自动执行这个事件了，跳转过去了。

<div onClick={this.jump(href)}></div>
<div onClick={() => this.jump(href)}></div>  //不想自动跳转的正确写法

2018.8.10

• Q:每次在使用从后端接口中返回的数据时候，都要有个判空的操作。不然如果代码中用到了某数组或者对象的js方法，若该对象或者数组不存在，则报js错误
  A:isEmpty方法 , item.list && item.list.length ? ,

• Q:在做poi弹窗时候（蒙层+内容），点击非内容区域，让弹窗消失时候，会冒泡到内容div
  A: 因此给内容区添加如下阻止冒泡事件

<div className=”mask” onClick={this.closeMask}>
  <div className=”content”onClick={e => e.stopPropagation()}></div>
</div>

2018.8.29

• Q: 在uat环境测试的id可以返回正确的数据，然而本地localhost同样访问这uat的这个id，却没有返回和uat一样的数据。。。
  A: 查看下请求head，发现版本号太低。于是去pacakge.json中重新配置了下版本号(一个表无线端当前版本号大的号码)，因为同事说，我们现在的online项目调用的无线端的数据接口，后台有个规则就是online的版本号要大于无线的才能正确访问到数据。
  改完还要记得重启一服务，，，npm start

2018.10.16

测试今个册数来的bug： 手动输入10， 20 ，30, 40， 。。。。。失效

image.png

 goToPage = () => {
    const { page } = this.state;
    debugger
    if (!page.trim() || !(/^[1-9]*$/.test(page.trim()))) {
      return;
    }
    const handler = this.props.onPageChanged;
    if (handler && this.props.total) handler(Number(page) - 1);
  };

用户点评没有解析表情包

image.png

直接用dangerouslySetInnerHTML 解析字符串就好了

关于空格的几种用法

• 1.hite-space
  属性取值为pre时，浏览器会保留文本中的空格和换行，这样你就可以直接在文本中使用空格和回车了。
• 2.letter-spacing
  设置文本中字符之间的间隔，它的取值可以是一个带单位的长度值，浏览器会在字和字之间设置指定长度的空白。

<div style="letter-spacing:20px">欢迎光临！</div>//  欢 迎 光 临

• 3.word-spacing

设置文本中单词之间的间隔，它的取值可以是一个带单位的长度值

 <div style="word-spacing:20px">Happy new year!</div>  

• 4.text-indent

有时候，文章每个段落需要缩进

---

上线后bug追踪

1.为一句话添加icon,可以使用如下方法

<span>人群说明</span>
// css
span:before {
   content: '';
   background-image: url();
   background-size: 12px 12px;
   backgroun-position:  0px -19px;
}
或者
在span标签前面加一个<i></i>标签

** 2.添加 立即预订按钮，吸顶展示 **

bookNow = () => {
    let absoluteHeight = this.refs.wrapper.offsetTop;
    let browerHeight = window.innerHeight;
    if(absoluteHeight > browerHeight ) {
      if (document.documentElement) {
        document.documentElement.scrollTop = absoluteHeight - browerHeight;
      }else {
        document.body.scrollTop = absoluteHeight - browerHeight;
      }
    } 
  }
 

3.性能优化时候，打包css文件。。gulp 的使用

//安装
npm install -g gulp
gulp -v  // 报错， ，，gulp: command not found
// 原来不是没有安装好gulp包，而是npm的环境变量没设置对
gulp default..

4. 用户点评数据按时间逆序

if (POIInfo.length && POIInfo[0].comments) {
      comments = POIInfo[0].comments;
      comments.sort(function(a, b) {
        return a.date < b.date;
      });
    }

5. poi点评中游玩景点简介加垂直滚动条： overflow-y: auto;
6. input框只能输入数字，

//原理就是将所有的非数字替换为空
<inptut type="text" onKeyUp={ e.target.value => {e.target.value.replace(/[^\d]/g,'')} } />
//当然0开头的数字也是不允许的，那么改为如下(^表示开头，$表示末尾，)
<inptut type="text" onKeyUp={ e.target.value => {e.target.value.match(/^[1-9]\d*$/g)} } />
另外补充：*和+的区别
*表示匹配前面的子表达式零次或多次，等价于{0，}
+表示匹配前面的子表达式1次或多次，等价于{1，}

正则方法.png

7.鼠标禁用样式 cursor：not-allowed 鼠标等待样式 cursor: wait
8. css制作销售属性选中效果

image.png

<div>上海自取<i></i></div>

div {
    height: 28px;
    border: 2px solid #2680ff;
    position: relative;
}
div i {
  display: block;
  position: absolute;
  border-bottom: 11px solid #2680FF;
  border-left: 18px solid transparent;
  width: 0px;
  height: 0px;
  bottom: 0;
  right: 0;
}
div i:after {
  position: absolute;
  content: '\2714';  // 
  color: #fff;
  left: -10px;
  top: 0;
  font-size: 8px;
}
//或者写成如下
div i:after {
  position: absolute;
  content: '';  // 如果把图片的url写在这里，就不能设置图片的大小了，所以才用了 
    background属性
  background-image: url(https://pages.c-ctrip.com/activity/online/detail_smallok.png);
  background-size: 8px 8px;
  width: 8px;
  height: 8px;
  left: -7px;
  top: 4px;
  font-size: 8px;
}

9. 两个接口拿到的评分兼容
   let score = cmtscore || commentInfo.score;
   console.log('0' || 5); // '0'
   console.log(0 || 5); // 5