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中的有状态组件和无状态组件。感谢大家的关注！