谈谈出入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 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

【笔记】web前端零基础课0904_学习笔记

JavaScript,它的运行必须位于<script></script>标签之间,

562
来自专栏Crossin的编程教室

【编程课堂】文本包装 textwrap

欢迎回到编程课堂,本周我们将了解一个与文字处理相关的模块—— textwrap,依照惯例,此处应该有一思考题: 现在有一文本文件 ‘abc.txt’,有 100...

32810
来自专栏前端架构与工程

【译】《Understanding ECMAScript6》- 第二章-函数

函数在任何一门编程语言中都是很重要的一个环节。JavaScript至今已有多年的历史,但是它的函数仍然停留在很初级的阶段。函数问题的大量堆积,以及某些函数非常微...

2007
来自专栏编程

字符串的方法汇总

name="aBcababc" #计算文本字符个数 print(len(name)) #统计a出现的次数 print(name.count('a',1,-1))...

1835
来自专栏十月梦想

js函数名和函数体内变量名重复引发的问题

在上述代码执行过程中,发现这个qlogo函数只能执行一次,多次执行则提示qlogo不是一个函数

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

(cljs/run-at (JSVM. :all) "Metadata就这样哦")

772
来自专栏GreenLeaves

jQuery对象扩展方法(Extend)深度解析

1、这几天在写自己的Js工具类库,所以在编写对象扩展方法,参考了jQuery的对象扩展方法,在编写该方法前,需要掌握js深拷贝和浅拷贝的相关知识,下面是jQue...

1827
来自专栏大数据钻研

一起来啃《JavaScript语言精粹》----对象

一、引言 任何编程语言在设计的时候就存在精华与糟粕并存,《JavaScript语言精粹》这本书就是取其精华,去其糟粕,能让我写出更优雅性能更好的JavaScri...

2726
来自专栏机器学习算法与Python学习

Python最简编码规范

1536
来自专栏小筱月

关于 vue 不能 watch 数组变化 和 对象变化的解决方案

再如使用 splice(0, 2, 3) 从数组下标 0 删除两个元素,并在下标 0 插入一个元素 3:

1283

扫码关注云+社区