开发就绪
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;
}
- 两个接口拿到的评分兼容
let score = cmtscore || commentInfo.score;
console.log('0' || 5); // '0'
console.log(0 || 5); // 5
网友评论