React 随笔二

这周做的demo3和demo4、5 随记的小点。

1、js错误提示: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `HelloMessage`. See https://fb.me/react-warning-keys for more information.

解决办法,给组件加个key属性,并赋值唯一key值用来标识。

2、state值改变——this.state.isVisible  或  this.setState({isVisible:true})

两种方式, this.setState() ----  及时刷新dom的时候,

this.state()  ----单独使用不能及时刷新dom,需要使用forceUpdate()

3、props  实现父组件传递数据到子组件

getDefaultProps:设置默认属性,返回一个对象

4、事件。直接使用value给input赋值,而不加onchange事件来监听的话。所得到的input只有你代码里设置的value值。用户不能直接改变input的值。可以用defaultValue而不是value来设置。或者加个onchange事件。

时间: 2024-10-05 11:15:08

React 随笔二的相关文章

React Native 二:快速入门

前面我们使用react-native init创建了一个项目,这是一个简单的Hello World App(项目结构如下图).对于iOS来说,你需要编辑index.ios.js来改变App:对于Android,你需要编辑index.android.js来修改App.然后摇晃菜单中点击Road JS查看改变.下面我们就以Android为例子来尝试修改了App. 一.修改index.android.js文件 index.android.js文件: //Mock数据 var MOCKED_MOVIES

react学习(二)试写一个例子

一.render方法 参考https://itbilu.com/javascript/react/EJiqU81te.html React的组件最终通过render方法渲染到DOM中,该方法由ReactDOM类库提供.API如下: ReactComponent render( ReactElement element,//需要渲染的元素 DOMElement container,//渲染结果在DOM中插入的位置 [function callback]//渲染完成后的回调函数 ) 二.动手写一个H

2018“硅谷技划”随笔(二):中美差距与硅谷的秘密

[题记]第三次来到硅谷,"朝圣"的心态越来越淡,这显然与中国蓬勃发展的互联网产业密不可分.但同样的,当你心态越发放平,你反而会越发感觉到硅谷的"可怕"和深不可测-- 2018年"硅谷技划"的日期虽然早早就定下了,但我们未曾想赶上了一个非常敏感的时期:中美贸易大战一触即发的前夜,以及"中兴"事件的余波未了.有五六位本有计划同行的伙伴出人意料的未能通过签证,我们无法判定与此事有关:但一种情绪和疑问肯定会对我们产生影响:太平洋两岸如

react生成二维码

图片实例: 简介: QRCode.js 是一个生成二维码的JS库.主要是通过获取 DOM 的节点,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 用法: 1. 在项目中引入qrcode.min.js文件. js文件网盘地址: https://pan.baidu.com/s/1kHB90FpMAJUvGvDNPpMm7Q 提取码: hkz4 2. 创建ref节点: <div style={{ width, height }} ref={qrcodeRef} /> 3. 在render

多线程随笔二(Task)

Task类是.net 4.0新加进来的特性,对原有的Thread,ThreadPool做了进一步的封装,使得.net平台上的多线程编程变得更加方便.废话不多说,进入正题. 一. Task启动 Task启动主要有以下几种用法: 1.构造Task对象,启动Task 1 Task myTask = new Task(DoSomething); 2 myTask.Start(); 2.通过Task.Factory启动Task Task second = Task.Factory.StartNew(DoS

React(二)实现双向数据流

<div id="app"></div> <script src="bower_components/react/react.min.js"></script> <script src="bower_components/react/react-dom.min.js"></script> <!-- 引入React的一个扩展 --> <script src=&

react随笔

state:数据随着时间变化,用来实现用户交互功能. props:用来实现组件间的通讯(值传递等); -->>从最小应用开始,区分出每个组件的prop和state这两种数据"模型". 分析时,根据提出的三个问题来实现区分: 1.是否是从父级通过 props 传入的?如果是,可能不是 state . 2.是否会随着时间改变?如果不是,可能不是 state . 3.能根据组件中其它 state 数据或者 props 计算出来吗?如果是,就不是 state . -->>

从0开始学习react(二)

今天,开始学习第二节!!! 工欲善其事,必先利其器 react推荐我们使用webpack来打包文件,那么我们就用吧!(其实真心不想用啊) 至于好处网上写的天花乱坠的,大家自行解决啊... 这节主要就学习怎么配置webpack了,这玩意我捣鼓了整整一天才弄的一知半解,哎,脑子差就是吃亏... 1.提前准备工作 (ps:自己装好node啊,别怪我没提醒你) 首先,你需要有一个自己的文件夹,至于什么名字你自己看着办,我的叫做 reactdemo 里面放一个测试的html加一个js文件夹 2.安装 2.

linux学习随笔二

一.如何使用查看帮助文档 二.内部命令与外部命令的区别 三.几个常用基础命令的学习 一.命令分为内部命令和外部命令,内部命令即shell命令,外部命令即用户命令,普通用户可以使用的.获得命令使用帮助也不一样,需要注意的是内部命令在用man查看帮助时显示的是bash的解释.对内部外部命令的理解可以分章节: 1.用户命令(/bin,/usr/bin,/usr/local/bin) 2.系统调用 3.库调用 4.特殊文件(设备文件) 5.文件格式(配置文件的语法) 6.游戏 7.杂项(Miscella