初學React：組件的樣式

時間 2019-12-20

標籤初學 react 組件樣式欄目 React 简体版

原文原文鏈接

React中組件的樣式有三種：javascript

<!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代碼 -->
	
	<!-- 
		設置組件樣式，講解三種：
			一、內聯樣式
			二、對象樣式、
			三、選擇器樣式

			注意：在React和HTML5中設置樣式時的書寫格式是有區別的
				*一、HTML5以;結尾
				*	React以,結尾
				*二、HTML5中key、value都不加引號
				*	React中屬於Javascript對象，key的名字不能出現"-",須要使用駝峯命名法。
					若是value爲字符串，須要加引號。
				*三、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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。