初学React:组件的样式

Posted 黑乌鸦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初学React:组件的样式相关的知识,希望对你有一定的参考价值。

 

 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:组件的样式的主要内容,如果未能解决你的问题,请参考以下文章

ReactNative: 使用View组件创建九宫格

如何使用样式组件覆盖material-ui css?

Reactreact概述组件事件

重用具有不同样式的 React 组件

TSX 组件中样式标记中 CSS 的语法突出显示

在 React 中使用样式组件在图标旁边显示文本