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元素必须有结束标签
