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. linux 的 sftp 和 scp

    ====================================== 作者: wxy0327(http://wxy0327.itpub.net) 发表于: 2006.12.07 13:19 分 ...

  2. Java json字符串对比

    public class JsonUtil { public static boolean compareJsonText(String str1, String str2) { return com ...

  3. Arm寄存器介绍及汇编基础

    一.ARM处理器支持7种工作模式 ① 用户模式(USR): 用于正常执行程序(The normal ARM program execution state) ② 快速中断模式(FIQ): 用于高速数据 ...

  4. my12_xtrabackup压缩备份与恢复

    xtrabackup版本 # rpm -qa | grep xtrabackup percona-xtrabackup-24-2.4.12-1.el7.x86_64 此版本为目前比较新的版本(2018 ...

  5. java——快排、冒泡、希尔、归并

    直接贴代码 快排: public class Test { private static void sort(int[] nums){ if(nums == null || nums.length = ...

  6. Vue.js-----轻量高效的MVVM框架（十一、使用slot分发内容）

    #单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...

  7. Vue.js-----轻量高效的MVVM框架（三、认识数据绑定）

    插值 1.文本插值 (1)双向数据绑定 v-model="msg0101",一旦v-model中的数值发生变化,所有用vue表达式{{msg0101}}的数据都会更新. (2)单次 ...

  8. socket阻塞与非阻塞情况下的recv、send、read、write返回值 以及epool_wait返回值学习

    https://www.cnblogs.com/longingforlife/p/3289976.html

  9. windows下修改了系统变量里java_home所引用的jdk,但是查询jdk的版本并没有发生改变

    # 原因:因为%SystemRoot%\system32 在引用这个环境变量时,会默认C:\Windows\System32下的jdk版本 # 解决方法: 把jdk的配置放在path前面就可以了

  10. 3d Max 2018安装失败怎样卸载3dsmax？错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...