React-动态修改样式和添加类别

导语:本节内容我们将介绍如何在React中动态的添加和修改样式,以及如何动态的添加类。

1.动态修改样式

首先查看当前按钮,我们通过内联样式渲染的按钮的样式如下:

我们希望达到的效果为:如果展示Person组件,按钮背景色为红色,否则为绿色,所以在之前if语句中添加修改样式代码(标注区域):

这时在浏览器中查看,可以动态的修改按钮样式。

2.动态添加类

我们在button下面添加一个p标签,查看当前页面效果:

我们要实现的功能为:如果Person个数小于等于2,字体变红,如果小于等于1,字体变红并加大加粗。

首先在App.css中定义class:

.red{color:red;}

.bold{font-weight:bold;font-size:22px;}

接着在render中判断并定义样式数组:

constclasses= []

classes.push('red')// classes = ['red']

}

classes.push('bold')// // classes = ['red', 'bold']

}

最后绑定class:

Hello Word

在浏览器中查看效果:

结语:下节内容我们将介绍React中的有状态组件和无状态组件。感谢大家的关注!

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180805G0OYGL00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券