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的传递，从父组件流向子组件。