项目中遇到的一些问题
1. height: 10; 或者: height: ‘10px’; 而不是 height: ‘10’
2. “ ； ”使用分号时，只在css中书写时添加引号，jsx中不建议添加分号；
3. map数组时return返回jsx代码时，最外层需要添加key={index}；
1
2
3
4
5
6
7
| data.map((item, index) => {
return (
<div key={index}>
{content}
</div>
)
})
|
4. for => htmlFor; class => className；
1
2
| <label htmlFor='example'></label>
<input id='example' />
|
5. 函数之间用空行空开；不同共能的代码尽量用空行空出来
6. defaultProps的书写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| class DrawingBoard extends Component {
....
}
DrawingBoard.propTypes = {
height: React.PropTypes.number,
width: React.PropTypes.number,
}
DrawingBoard.defaultPorps = {
height: 10,
width: 20,s
}
export default DrawingBoard
|
7.函数的书写方式
方式一：函数bind法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| class AttendClass extends Component {
constructor(props) {
super(props)
this.select = this.select.bind(this)
this.delete = this.delete.bind(this)
}
select() {
...
}
delete() {
...
}
render() {
...
}
}
|
方式二：箭头函数方式
1
2
3
4
5
6
7
8
9
10
11
12
13
| class AttendClass extends Component {
select = () => {
...
}
delete = () => {
...
}
render() {
}
}
|
8.单词及括号等之间用空格隔开
1
2
3
4
5
6
7
| if (this.props.display === true) {
...
} else {
...
}
const { tasks, subTasks, units } = this.props
|
9. == ——–> ===
10.!!!warning Missing radix parameter radix
parsetInt('string', radix)
radix是一个数字，表示几进制数字，为必填项。
11.The Body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype grard-for-in
1
2
3
4
5
| for (let i in datas) {
if (datas.hasOwnProperty(i) {
console.log(i)
}
}
|
12. Do not mutate state directly. Use setState react/no-direct-mutation-state
this.state.example 不能直接操作，要修改state，只能通过setState()来修改。