谈谈出入React框架踩过的坑

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>
             }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程心路

想学习php的,不如来这里看看

win+R打开命令行,cmd进DOS窗口 DOS命令开启关闭Apache和Mysql Apache启动关闭命令

673
来自专栏程序员互动联盟

【答疑解惑第三十一讲】如何使用全局变量?

疑惑一 全局变量如何用? ? 看图中的箭头的地方,声明全局变量的时候使用了static,这个问题就涉及到了static的使用,如果要使用全局变量,并且在多文件中...

3329
来自专栏偏前端工程师的驿站

JS魔法堂:从void 0 === undefined说起

一、前言                                       当使用coffeescript书写如下代码时 name = person?...

1877
来自专栏深度学习之tensorflow实战篇

python pandas.read_csv参数整理,读取txt,csv文件

pandas.read_csv参数整理 读取CSV(逗号分割)文件到DataFrame 也支持文件的部分导入和选择迭代 更多帮助参见:http://pandas...

8106
来自专栏C/C++基础

web前端开发初学者十问集锦(5)

(1)立即执行函数的定义 立即执行函数(Immediately Invoked Function)是在页面加载时立即被执行的函数。

712
来自专栏夏时

PHP 常用函数大全

1512
来自专栏从流域到海域

《笨办法学Python》 第20课手记

《笨办法学Python》 第20课手记 本节课讲函数与文件,内容比较简单,但请注意常见问题解答,你应该记住那些内容。 指针表示存储地址。 原代码如下: from...

1866
来自专栏Golang语言社区

JS基础(上)

JS与DOM的关系 浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象 文档对象模型DOM(Document Obj...

35414
来自专栏遊俠扎彪

C语言C99标准中的变长数组(VLA)

长期以来,我都很自然的认为定义和声明数组时,数组大小必须是一个常量表达式,因为刚学编程的时候在这个上面翻过好多次语法错误。那个时候大致会写如下的代码:

2279
来自专栏salesforce零基础学习

salesforce 零基础学习(二十四)解析csv格式内容

salesforce中支持对csv格式的内容批量导入,可以使用dataloader,然而有些情况下,当用户没有相关权限使用dataloader导入情况下,就的需...

17310

扫码关注云+社区