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. hdu6299 Balanced Sequence 贪心

    题目传送门 题目大意:给出n个字符串,定义了平衡字符串,问这些字符串组合之后,最长的平衡字符子序列的长度. 思路: 首先肯定要把所有字符串先处理成全是不合法的,记录右括号的数量为a,左括号的数量为b, ...

  2. The MathType DLL cannot be found 一劳永逸的方法

    可能会看到下面的情况,然后实际上我们也能用过外部打开直接使用,那要你何用? 于是,我们找到这个文件,删除就OK 反正我写完论文就卸载了...

  3. Ztree 默认展开二级菜单

    在初始加载树形控件的时候调用zTree的expandNode (node, expandFlag, sonSign, focus, callbackFlag)方法 node:树形节点 expandFl ...

  4. Mybatis学习笔记12 - 动态sql之choose(when otherwise)标签

    choose (when, otherwise):分支选择:带了break的swtich-case 示例代码: 接口定义: package com.mybatis.dao; import com.my ...

  5. inventor安装失败怎样卸载安装inventor 2014？

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

  6. One By One扑克牌游戏(C++)

    用我们方言说就是类似“骡子冲”的游戏,游戏双方各拿一定数目的扑克牌,每次每个人打一张牌,排成一列.如果打出的牌有一样的,那么这两张牌(包括这两张牌),全部按顺序拿到打出第二张相同牌的玩家手中,且放在手 ...

  7. [Android]apk反编译方法

    在学习Android开发的过程你,你往往会想去学习别人的apk是怎么开发的,作为一个开发者,你可能会很想知道这些效果界面是怎么去实现的,这时,你便可以对改应用的APK进行反编译查看.下面是我参考了一些 ...

  8. （七）使用jedis连接单机和集群（一步一个坑踩出来的辛酸泪）

    环境准备: redis-4.0.9,最新版了 ruby:redis-x.x.x.gem    这个gem什么版本都行,我redis4用3.0.0的gem正常跑 jedis-2.9.0.jar,最新版 ...

  9. poj 3107 删点最大分支最小

    http://poj.org/problem?id=3107 这实际上就是找重心,在之前有做过:http://www.cnblogs.com/qlky/p/5780933.html #include ...

  10. html 01前沿-web介绍

    1. 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 2. 浏览器(显示代码) 浏览器是网页显示.运行的平台,常用的浏览器有IE.火 ...