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：组件的样式的更多相关文章

  1. react组件配置样式hover效果的实现

    需求 react 自定义一个组件,组件内部样式可以灵活配置 问题 一般样式都可以通过属性传入,比如:颜色,字号等,但是对于一些有hover效果的地方,属性传入后,按照平时css的使用方式不太容易实现 ...

  2. 【react 样式】给react组件指定style

    1.使用行内样式(优先级高) 自定义的react组件是没有style属性的,如果要给想给自定义react组件指定style,我的方法是用一个<div>包裹自定义组件,然后给div指定sty ...

  3. React组件(组件属性this.state和this.props,css样式修饰组件)

    目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...

  4. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

  5. React组件开发

    目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...

  6. 如何优雅的设计 React 组件

    作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...

  7. 如何优雅的设计React组件

    如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...

  8. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  9. 编写React组件的最佳实践

    此文翻译自这里. 当我刚开始写React的时候,我看过很多写组件的方法.一百篇教程就有一百种写法.虽然React本身已经成熟了,但是如何使用它似乎还没有一个"正确"的方法.所以我( ...

随机推荐

  1. Diophantus of Alexandria

    Diophantus of Alexandria was an egypt mathematician living in Alexandria. He was one of the first ma ...

  2. P2903 [USACO08MAR]麻烦的干草打包机The Loathesome Hay Baler

    传送门 题目问的是从出发点一直跑到终点的一条链上所有齿轮的速度和 其他的不用考虑 直接搜就好了 注意求的是绝对值之和,不是和的绝对值,所以不用考虑方向问题 注意 N<=1050 数组不要只开10 ...

  3. macOS（OS X）安装与配置 Homebrew

    Homebrew 是 macOS 平台的软件包管理器,相当于 Linux 常用的 apt-get,zypper,pacman 等. 安装: 打开终端,逐条执行以下命令 首先需要安装依赖包 Xcode, ...

  4. Oracle的CLOB大数据字段类型

    转载:https://www.cnblogs.com/Grand-Jon/p/7389427.html 一.Oracle中的varchar2类型 我们在Oracle数据库存储的字符数据一般是用VARC ...

  5. arraylist和linkedlist内部的实现大致是怎样的

    1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList优于LinkedList,因为ArrayList可以随 ...

  6. 读书笔记 - 《毛X东传》

    这个书名重复太多,这本的作者是迪克威尔逊.这本书很有意思,可以看出是一个局外人根据残缺不全的资料所写的出来的,而且是结合心理分析的手法主要描述政治历程.总体来说作为传记不够全面,但对于一个中国人来说可 ...

  7. C# 通过 Hessian服务调用java

    1.下载Hessiancsharp.dll 2.新建一个c#窗体程序,然后在添加一个类库 3.添加一个接口类,接口中的方法名和参数与java中的服务方法名和参数保持一致 public partial ...

  8. 2019.03.20 读书笔记 as is 以及重写隐式/显示

    强转.as is 的用法 强制转换类型有两种:子类转基类,重写隐式(implicit )\显示(explicit) 转换操作符 class myclass { private int value; p ...

  9. 在IE8下background-image不显示的解决方法

    刚写一个页面,在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来. 调试N遍后,只好上stackoverflow去找一下,果然找到了. 最初是这样写的: ...

  10. python单元测试框架-unittest（三）之用例执行顺序

    执行顺序规则: 测试类或测试方法的数字与字母顺序0~9,A-Z 执行如下脚本,理解用例执行顺序 #coding=utf-8 import unittest class Test1(unittest.T ...