React組件的定義和使用 — React教程

React組件的定義相當於定義類型，而使用表示類的實例化。

組件定義

React開發中通常使用JSX語法進行組件定義，方便組件代碼的編寫。如：

class ShopCart extends React.Component{
	render() {
		return (
			<div className="shop-cart">
        		shop cart for {this.props.name}
	       </div>
		);
	}
}

等同於

return React.createElement('div', {className: 'shop-cart'});

組件使用

我們在另外一個組件中使用上面定義的組件。

class Page extends React.Component{
	renderCart(name) {
		return <ShopCart name={name} />;
	}
}

在Page中通過renderCart方法將組件ShopCart實例化，並通過props將參數name從父組件Page傳遞到ShopCart組件。在React應用中，數據通過props的傳遞，從父組件流向子組件。