react 踩过的坑

发表于

1 在JSX的元素中写入内联样式，例如

1
2
<div style={"color:blue"}></div>
报错：warning：Style prop value must be an object  react/style-prop-object

原因：在React框架的JSX编码格式要求，style必须是一个对象
解决方法：除了外部那个表示Javascript语句的花括号外，里面必须再写一个花括号{}包含的对象，例如

1
<div style={ {  color:“blue”  } }></div>，

外部的{ }表示这是Javascript句法，里面的{ }是一个对象

2 遍历数组元素：

1
2
3
4
5
var arr=[1,2,3]
arr.map(function(x){
  return (<div></div>);
})
报错：Warning:Each child in an array or iterator should have a unique "key" prop. Check the render method of `NavBlock`

原因：在React中数组遍历返回元素或组件时需加上key属性作为唯一标识
解决方法：写成

1
2
3
4
var arr=[1,2,3]
arr.map(function(x,i){
  return (<div key=i></div>);
})

3 在render()函数中返回时这样写：

1
2
3
4
5
render(){
  return <div></div>
        <div></div>
        <div></div>
  }

报错：Adjacent JSX elements must be wrapped in an enclosing tag (75:8)
原因：render()函数中返回的所有元素需要包裹在一个外部元素里面
解决方法：可改写为：

1
2
3
4
5
6
7
render(){
  return  <section>
                <div></div>
                <div></div>
                <div></div>
          </section>
  }

最后一点—不能写成：（return语句和返回元素不在同一行会被解析器视为返回null导致错误)

1
2
3
4
5
6
7
8
render(){
  return  
       <section>
          <div></div>
          <div></div>
          <div></div>
       </section>
   }