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. Python入门8文件处理

    文件处理文本模式name = input("请输入用户名:").strip()with open("a.txt","wt",encoding ...

  2. day32 线程

    1.     线程是什么,有了进程为什么还要线程 进程有很多优点,它提供了多道编程,让我们感觉我们每个人都拥有自己的CPU和其他资源,可以提高计算机的利用率.很多人就不理解了,既然进程这么优秀,为什么 ...

  3. C#学习 - 关于Interlocked.CompareExchange()的用法

    https://blog.csdn.net/jianhui_wang/article/details/80485517 Interlocked.CompareExchange有一组函数   名称 说明 ...

  4. js网页瀑布流布局

    瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...

  5. java——修改txt文件中某一行的内容

    今天无意间看到java.io中有一个类:RandomAccessFile,可以在文件的任意位置进行读写操作,想到我之前写的一个小项目,想在txt中修改某一行的内容,都是从头遍历txt文件,修改这一行的 ...

  6. Abbott's Revenge UVA - 816 （输出bfs路径）

    题目链接:https://vjudge.net/problem/UVA-816 题目大意: 有一个最多包含9*9 个交叉点的迷宫.输入起点,离开起点时的朝向和终点,求一条最短路(多解时任意输出 一个即 ...

  7. 转载【Ubuntu】Ubuntu14.04虚拟机调整窗口大小自适应VMware14窗口

    Ubuntu屏幕居中一小块,很不好看 查看-–> 自动调整大小—>自动适应客户机/自动适应窗口 切一下就可以把Ubuntu图的界面大小调的和VMware窗口自适应了 效果:   转载 自h ...

  8. scrollHieght、offsetHeight、clientHeight、width、height

    1.scroll滚动(scrollTop.Left.Height.Width) scroll()当用户滚动指定的元素时,会发生 scroll 滚动事件: scrollWidth.scrollHeigh ...

  9. Devexpress Xtrareports 创建多栏报表

    根据官方回答:多列或多行(取决于当前的多栏设置)呈现数据的报表 这种报表是有用的,例如,当每个明细区都只显示少量数据.并且需要在一列的右侧打印下一个明细区时,这样就能充分利用整个页面的宽度,此外,当创 ...

  10. js超链接

    _blank -- 在新窗口中打开链接 _parent -- 在父窗体中打开链接 _self -- 在当前窗体打开链接,此为默认值 _top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页) ...