程式印象: react components是什麽

2019年12月11日星期三

定義

Components元件像函數可以回傳html元素。

類別元件，會有些補充

react-tutorial\src\index.js

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport"
	content="width=device-width, initial-scale=1" />
	<title>React App</title>
	</head>
	<body>

	<div id="root"></div>

	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	import React from 'react';
	import ReactDOM from 'react-dom';

	/*
	function Car() {
	return <h2>Hi, I am also a Car!</h2>;
	}
	*/
	class Car extends React.Component {
	render() {
	return <h2>Hi, I am a Car!</h2>;
	}
	}

	ReactDOM.render(<Car />, document.getElementById('root'));

view raw index.js hosted with ❤ by GitHub

屬性像函數的參數，語法同HTML屬性，如

	class Car extends React.Component {
	render() {
	return <h2>I am a {this.props.color} Car!</h2>;
	}
	}

	ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

元件有一内建的state物件，可儲存元件的屬性值

	class Car extends React.Component {
	constructor() {
	super();
	this.state = {color: "red"};
	}
	render() {
	return <h2>I am a {this.state.color} Car!</h2>;
	}
	}

	ReactDOM.render(<Car />, document.getElementById('root'));

元件裏面的元件

	class Car extends React.Component {
	render() {
	return <h2>I am a Car!</h2>;
	}
	}

	class Garage extends React.Component {
	render() {
	return (
	<div>
	<h1>Who lives in my Garage?</h1>
	<Car />
	</div>
	);
	}
	}

	ReactDOM.render(<Garage />, document.getElementById('root'));

元件在檔案中

	import React from 'react';
	import ReactDOM from 'react-dom';

	class Car extends React.Component {
	render() {
	return <h2>Hi, I am a Car!</h2>;

	}
	}

	export default Car;

view raw App.js hosted with ❤ by GitHub

	import React from 'react';
	import ReactDOM from 'react-dom';
	import Car from './App.js';

	ReactDOM.render(<Car />, document.getElementById('root'));

view raw index.js hosted with ❤ by GitHub

如果你覺得這篇文章很有用，可以請我喝杯咖啡，讓我提供更多優質文章給您。感謝所有支持的朋友。

Vere Perrot 資訊人.科技人.行銷人，現為軟體分析師。定位自己為網路觀察家，永遠保持好奇心與熱情，學習跨領域新事物，希望最終能成為一個全方位的人。 Mail: vereperrot@gmail.com

在文字的世界裡尋找心靈的共鳴，遠山藍以溫柔的筆觸分享書籍的力量與生活的智慧。無論是細膩的書評、深刻的人生感悟，還是技術與創新的新奇發現，每篇文章都是一次內心的療癒旅程。希望透過閱讀，帶領讀者在忙碌的生活中找到一片寧靜與啟發。讓我們一起，在書香中遇見更好的自己！