React笔记-一些要注意的点

小鱼儿 2022-06-17 04:56 220阅读 0赞

![Markdown][]  
在React中要注意在componentWillUpadate 中不能用 this.setState() 方法。

## componentWillUpadate ##

### 问题的出现 ###

在学习的时候，有一个例子的要求是，

> 使用componentWillUpdate()方法修改示例代码，使时钟在秒为0时显示为红色字体！

我一开始在**componentWillUpadate()**中 写的是

……
     componentWillUpadate:function(){ 
       if(this.state.time.split(':')[2] === '00'){
            this.state. = 'red';
        }
     }
    ……

程序报bug了。

我去找原因：

> You cannot use this.setState() in componentWillUpadate . If you need to update state in response to a prop change, use componentWillReceiveProps instead.

代码如下：

height="265" scrolling="no" title="LWbYKY" src="//codepen.io/ziazan/embed/LWbYKY/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen <a href="http://codepen.io/ziazan/pen/LWbYKY/">LWbYKY</a> by ziazan (<a href="http://codepen.io/ziazan">@ziazan</a>) on <a href="http://codepen.io">CodePen</a>.&\#10;

官网上上说的是在**componentWillUpadate** 中不能用 this.setState() 方法。

## 设置组件style ##

设置组件中的style属性时，要双大括号：

<div className="ez-digi-clock"  style={
       {color:this.state.color}}>
        {
       this.state.time}
    </div>

> 这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象

[Markdown]: http://p1.bqimg.com/582279/ed220c3d21dd7467s.png

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关关于react的一些知识点总结

1、为什么选择框架？组件化：使我们的工程易于维护，容易拓展分层的设计：mvvm框架等等使我们的代码解耦易于读写，视图数据分离开发效率:底层封装好了具体

布满荆棘的人生/ 2023年05月22日 15:28/ 0 赞/ 44 阅读

相关 npm的一些注意点

package.json中 main是入口 bin里面一般是处理全局命令的升级版本号+1 npm version major/minor/patc

妖狐艹你老母/ 2023年01月14日 09:59/ 0 赞/ 35 阅读

相关 apicloud开发时的一些注意点

优化点击事件，添加`tapmode="selected"`跳转速度加快 <footer class="aui-bar aui-bar-tab" id="footer"

叁歲伎倆/ 2022年12月25日 02:55/ 0 赞/ 267 阅读

相关压力测试的一些注意点

今天给新来的人说了一下压力测试的一些注意点顺便贴到这里，分享一下，偶们的系统是linux下的多进程svr 一般要注意以下的一些点： 1、压测的客户端与被压的svr端

小灰灰/ 2022年07月14日 15:16/ 0 赞/ 298 阅读

相关内部类的一些注意点

关于匿名内部类使用局部变量为什么要是final： java采用copy local variable来实现final，也就是说把定义为final的局部变量老被过来用，引用的也

绝地灬酷狼/ 2022年07月12日 08:53/ 0 赞/ 270 阅读

相关 React笔记-一些要注意的点

![Markdown][] 在React中要注意在componentWillUpadate 中不能用 this.setState() 方法。 componentW

小鱼儿/ 2022年06月17日 04:56/ 0 赞/ 221 阅读

相关 react中的JSX注意点

定义组件时，最外层必须有一个标签进行包裹。例如： / 报错 / const component1 = <div>123</div><

本是古典何须时尚/ 2022年05月23日 10:35/ 0 赞/ 222 阅读

相关关于Optional orElseGet的一些注意点

前提 : 现在有A B C三个类, 代码如下 : A.java package com.ahut.essearch.Optional; / de

小咪咪/ 2022年05月12日 10:10/ 0 赞/ 297 阅读

相关 Vue中一些需要注意的点

1.给link添加事件、给组件绑定原生事件在vue-router1中使用v-link写入路由，但是在vue-router2中要使用router-link写入路由，在浏览器渲

雨点打透心脏的1/2处/ 2021年09月18日 02:20/ 0 赞/ 512 阅读

相关注册模块要注意点

1.校验模块输入校验非常麻烦，需要进行大量的判断，这时我们可以使用Struts 2提供的校验框架来实现。校验规则文件名为 Action名+”-validatio

我会带着你远行/ 2021年09月11日 03:40/ 0 赞/ 330 阅读