React创建组件有两种方式
- 通过 JS函数 创建
- 通过 class 创建
一、函数式组件
注意:
- 函数名称必须为大写字母开头,React通过这个特点来判断是不是一个组件
- 函数必须有返回值,返回值可以是:JSX对象或null
- 返回的JSX,必须有一个根元素
- 组件的返回值使用()包裹,避免换行问题
function Welcome(props) {
return (
// 此处注释的写法
<div className="shopping-list">
{/* 此处 注释的写法 必须要{}包裹 */}
<h1>Shopping List for {props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
ReactDOM.render(
<Welcome name="jack" />,
document.getElementById('test')
)
二、类式组件
// 1.创建类式组件
class Welcome extends React.Component {
render() {
// render是放在哪里?MyCom的原型对象上,供实例使用
// render中的this是谁?MyCom的实例对象
return (
// 此处注释的写法
<div className="shopping-list">
{/* 此处 注释的写法 必须要{}包裹 */}
<h1>Shopping List for {props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
}
// 2.渲染到页面
ReactDOM.render(<Welcome />, document.getElementById('test'))
注意:
- 组件名必须首字母大写
- 虚拟DOM元素只能有一个根元素
- 虚拟DOM元素必须有结束标签