码迷,mamicode.com
首页 > 其他好文 > 详细

谈谈出入React框架踩过的坑

时间:2017-01-22 15:22:09      阅读:2979      评论:0      收藏:0      [点我收藏+]

标签:方法   blog   function   code   包含   validate   遍历数组   not   unique   

1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div>

报错:warning:Style prop value must be an object  react/style-prop-object

原因:在React框架的JSX编码格式要求,style必须是一个对象

解决方法:除了外部那个表示Javascript语句的花括号外,里面必须再写一个花括号{}包含的对象,例如<div style={ {  color:“blue”  } }></div>,外部的{ }表示这是Javascript句法,里面的{  }是一个对象

2写入表格

<table>
   <tr>
       <td></td>
   </tr>
</table>

报错:Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>

原因:在React中<tr>元素不可以作为<table>元素的直接子元素

解决方法:在<tr>元素tbody和<table>元素中间插入<tbody>元素,如:

<table>
 <tbody>
   <tr>
       <td></td>
   </tr>
 <tbody>
</table>

3遍历数组元素:

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属性作为唯一标识

解决方法:写成

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

4在render()函数中返回时这样写:

render(){
      return  <div></div>
              <div></div>
              <div></div>
             }

报错:Adjacent JSX elements must be wrapped in an enclosing tag (75:8)

原因:render()函数中返回的所有元素需要包裹在一个外部元素里面

解决方法:可改写为:

render(){
      return  <section>
                    <div></div>
                    <div></div>
                    <div></div>
              </section>
         }

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

render(){
      return  
                 <section>
                    <div></div>
                    <div></div>
                    <div></div>
                 </section>
             }

 

 

 

 



谈谈出入React框架踩过的坑

标签:方法   blog   function   code   包含   validate   遍历数组   not   unique   

原文地址:http://www.cnblogs.com/penghuwan/p/6340151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!