谈谈出入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>}

其实啊，我只是把你们喝咖啡的时间，都用来喝啤酒而已

谈谈出入React框架踩过的坑相关推荐

JAVA类似ABP框架_使用ABP框架踩过的坑系列5
DDD领域驱动开发,实际是为复杂的业务场景而生的,为了让开发人员专注于业务,而操作系统.数据库.网络之类的技术细节,必须要持久透明化:实际就是数据库系统DBMS的ORM抽象,目标就是业务不需要考虑数据 ...
abp mysql 存储过程_使用ABP框架踩过的坑系列5
DDD领域驱动开发,实际是为复杂的业务场景而生的,为了让开发人员专注于业务,而非操作系统.数据库.网络之类的技术细节,必须要持久透明化:实际就是数据库系统DBMS的ORM抽象,目标就是业务不需要考虑数 ...
J-UI框架踩过的坑
2019独角兽企业重金招聘Python工程师标准>>> // 关闭当前页面,并刷新指定页面//方法一: 直观,简单 //如果当前只打开了一个页面,reload会出前端问题 navTa ...
Abp mysql guid_使用ABP框架踩过的坑系列5
public static class DbContextConfigurer { public static void Configure(DbContextOptionsBuilder build ...
谈谈FrozenUI前端框架（应用心得） - 入坑篇
FrozenUI框架,是一个相对比较纯粹的css类框架,只适合小项目的样式开发:官方并没有太多,甚至可以说没有提供任何js相关的功能性包,所以个人不推荐开发者使用. 官方宣称: FrozenUI 是一 ...
[react] 在使用react过程中你都踩过哪些坑？你是怎么填坑的？
[react] 在使用react过程中你都踩过哪些坑?你是怎么填坑的? 组件不像Vue一样有(beforeRouteLeave, beforeRouteEnter)路由守卫 Hooks中的闭包渲染问题 ...
truffle unbox react 初始化踩坑
truffle unbox react 初始化踩坑 1.文件位置引起的错误一定要在package.json 所在文件夹下npm run start ,新版本一定要进入client文件夹再npm ru ...
02 ABY框架的搭建及踩到的坑
参考资料:https://github.com/encryptogroup/ABY 前言: ABY框架在Ubuntu系统中完成依赖包的安装和运行环境的配置之后,在搭建ABY框架还是出现了一些问题,下面 ...
用vant框架做H5时踩过的坑（下拉刷新、上拉加载等）
用vant框架做H5时踩过的坑 1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正 ...
谈谈JavaScript数组使用注意事项及踩过的坑，排序问题，for in遍历问题等
JavaScript中数组的使用还是比较广发的,尤其与服务器交互的时候,返回结果多半有数组集合,本文探讨JavaScript中数组使用的一些注意事项及踩过的坑汇总. 1.认识数组 JavaScript ...

谈谈出入React框架踩过的坑

谈谈出入React框架踩过的坑相关推荐

最新文章

热门文章