react style border

关于react中书写css内联样式的问题陈述：

使用react对前端代码的标准和标签语义话要求很严格，再加上grunt的现实，代码不严谨显得更加不可规避，甚至少些分号，少加非闭合标签的斜线/，grunt都会报错，自动停止服务，项目改好之后又要重新编译。

下面纪录在开发过程中遇到的两种错误。

第一，react中内联样式border

有如下代码，错误代码（❌）

<td style={{border:"0"}}></td>

border:"0"这种写法不会导致浏览器不识别，浏览器依然不会给border显示边框，平常在css中也会有很多人会建议当单位为0时不写px，但是react会报这样的警告。

大概含义是在说这个是一个没有单位的数值，在未来版本这样的属性会被取消。

解决方案为：

<td style={{border : "0px"}}></td>

或者

<td style={{border: 0}}></td>

或者

<td style={{border : "none"}}></td>

第二，标签语义化

有时候为了使代码样式简单，会定义非常不友好的标签嵌套。那这时候，react也会报出警告，来提示开发者的代码标准化。

譬如：

<p><section></section></p>

对于p中嵌套section，react肯定会提出警告的。