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

相关文章

来自专栏前端小叙

js操作DOM在父元素中的结尾添加子节点注意

所以js是不能直接传入字符串的,但是jquery的append可以直接传入html字符串。

19840
来自专栏Objective-C

Swift 基本语法01-Swift简介

40170
来自专栏LanceToBigData

Jsoup(一)Jsoup详解(官方)

一、Jsoup概述 1.1、简介     jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API...

1.3K50
来自专栏web前端教室

JS基础知识之new操作符 | 前端卧谈会第9期

音频请点此进行收听 音频原文: new操作符是个啥? 就是你搞个 function abc(aa){ this.abc = aa } 然后 var xx = ...

19290
来自专栏积累沉淀

JavaScript DOM基础2

DOM自身存在很多类型,比如Element类型:表示的是元素节点,再比如Text类型:表示的是文本节点。DOM也提供了一些扩展功能。 一.DOM类型 DOM基础...

19980
来自专栏行者常至

005.golang 控制语句

10930
来自专栏LanceToBigData

Vue.js之Vue计算属性、侦听器、样式绑定

1)el(挂载点) 创建一个Vue这个实例去接管页面中的某个Element(元素)。也就是说el表明和页面上 哪一个节点做绑定! 2)data vue实...

26330
来自专栏Pythonista

Golang实现一个密码生成器

21530
来自专栏coder修行路

Python爬虫从入门到放弃(十四)之 Scrapy框架中选择器的用法

Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分 Xpath是专门在X...

20780
来自专栏柠檬先生

zepto 基础知识(5)

81.width   width() 类型:number   width(value) 类型:self   width(func...

22470

扫码关注云+社区

领取腾讯云代金券