初学React：组件的样式
Posted 黑乌鸦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学React：组件的样式相关的知识，希望对你有一定的参考价值。
React中组件的样式有三种：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React工程模板</title> <!-- react.js 是React的核心库 --> <script src="./build/react.js charset="utf-8"></script> <!-- react-dom.js是作用是提供与DOM相关的功能 --> <script src="./build/react-dom.js" charset="utf-8"></script> <!-- browser.min.js 的作用是将JSCX语法转换成javascript的语法 --> <script src="./build/browser.min.js" charset="utf-8"></script> <!-- 还可以直接通过网址引入browser.min.js文件 --> <!-- 比如：<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> --> <style> .pStyle { font-size:30px; } </style> </head> <body> <!-- React渲染的模板内容会插入到这个DOM节点中，作为一个容器 --> <div id="container"> </div> <!-- 在React开发中，使用JSX，跟Javascript不兼容，在使用JSX的地方，要设置type：text/babel --> <!-- babel是一个转换编译器，把ES6转成可以在浏览器中运行的代码 --> <script type="text/babel"> <!-- 在此处编写React代码 --> <!-- 设置组件样式，讲解三种： 1、内联样式 2、对象样式、 3、选择器样式 注意：在React和HTML5中设置样式时的书写格式是有区别的 *1、HTML5以;结尾 * React以,结尾 *2、HTML5中key、value都不加引号 * React中属于Javascript对象，key的名字不能出现"-",需要使用驼峰命名法。 如果value为字符串，需要加引号。 *3、HTML5中，value如果是数字，需要带单位 * React中不需要带单位 *我们定义一个组件类，同时使用三种设置组件样式的方式 需求：定义一个组件，分为上下两行显示内容 <div> 内联样式：设置背景颜色、边框大小、边框颜色 <h1></h1> 对象样式：设置背景颜色、字体颜色 <p></p> 选择器样式：设置字体大小 </div> 注意：在React中使用选择器设置组件样式时，属性名不能使用class，需要使用className替换 （因为class在React中是一个关键字） 类似的：使用htmlFor替换for --> var hStyle = { backgroundColor: "green", color: "red" } var ShowMessage = React.createClass({ render: function() { return ( // 注意；这里的backgroundColor,中间不能加“-” <div style={{backgroundColor:"yellow", borderWidth:5, borderColor:"brack", broderStyle:"solid"}}> <h1 style={hStyle}>{this.props.firstRow}</h1> <p className="pStyle">{this.props.secondRow}</p> </div> ); } }); ReactDOM.render( <ShowMessage firstRow="你好" secondRow="小豆豆" />, document.getElementById("container") ); </script> </body> </html>
以上是关于初学React：组件的样式的主要内容，如果未能解决你的问题，请参考以下文章