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. Educational Codeforces Round 3 B

    B. The Best Gift time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  2. Oracle SQL优化规则详解

    1. 选用适合的Oracle优化器 Oracle的优化器共有3种: a. RULE (基于规则) b. COST (基于成本) c. CHOOSE (选择性) 设置缺省的优化器,可以通过对init.o ...

  3. python 文件与异常

    ####文件### r: -只能读 不能写 -读取文件不存在,是会报错 r+: - 可以执行读写操作; - 文件不存在, 报错: w: -只能写,不能读 -会清空文件内容 -文件不存在,会新建文件 w ...

  4. 解决IDEA卡顿问题及相关基本配置

    https://blog.csdn.net/u013068377/article/details/54316965 https://blog.csdn.net/u014527619/article/d ...

  5. redis实现SSO单点登录,集群,分布式锁

    https://blog.csdn.net/aussme/article/details/80660443

  6. python3 continue和break 区别

    for i in range(10): if i==5: continue #跳出当次循环 if i==8: break #跳出整个for循环 print(i)

  7. python3 迭代器笔记

    #迭代器import syslist=[1,2,3,4]it=iter(list)while True: try: print(next(it)) except StopIteration: sys. ...

  8. 爬虫（GET）——爬baidu.com主页

    工具:python3 目标:www.baidu.com 工作流程: 1)反爬虫第一步:抓包工具fiddler抓取页面请求信息,得到User-Agent的值,用于重构urllib.request.Req ...

  9. 关于vue路由嵌套遇到的坑~

    关键在于子路由中的path问题,path之前不要放/ <!DOCTYPE html> <html lang="en"> <head> <m ...

  10. 笔记本Win8 换Win7 设置 BIOS

    去年买了台笔记本,笔记本自带win8系统,想安装Win7折腾了好久都没有安装成功 后来在BIOS中找到了一个uefi/legacy boot项,将原来的uefi only 修改为legacy only ...