React组件的创建
1、使用函数创建组件
函数组件:使用JS的函数(或箭头函数)创建的组件;
function Hello(){
return (
<div>这个是一个函数组件</div>
)
}
//或
const Hello=()=>{
return <div>这个是一个函数组件</div>
}
ReactDOM.render(<Hello/>,document.getElementById('root'));
以上便是一个简单的函数组件;
函数组件的创建有一些注意项:
1. 函数名称必须以大写字母开头;
2. 函数组件必须有返回值return,表示该组件结构;
3. 返回值可以为 null ,表示不渲染任何内容;
4. 渲染函数组件时,使用函数名作为组件标签名;
2、使用类创建组件
类组件:使用ES6的class创建的组件;
class Hello extends React.Component{
render(){
return <div style={{color:'red'}}>这个是一个类组件</div>
}
}
ReactDOM.render(<Hello/>,document.getElementById('root'));
类组件的创建也有一些注意项:
1. 函数名称必须以大写字母开头;
2. 类组件应继承(extends) React.Compontent父类,从而可以使用父类中提供的方法或属性;
3. 类组件必须必须提供render()方法;
4. render()方法必须有返回值,表示该组件的结构;
5. 返回值可以为 null ,表示不渲染任何内容;
3、将组建抽离至单独JS文件
一般一个项目中会用到很多组件,这时我们一般不可能将这些组件放在同一个js文件内,所以我们需要将组件按照功能模块抽离至单独js文件中;
步骤:
1.创建一个新的js文件;
2.导入React;
3.创建组件;
4.导出该组件;
import React from "react";
class Hi extends React.Component {
render(){
return <div>这个一个单独的组件</div>
}
}
// 导出该组件
export default Hi;
5.在使用该组件的页面引入该组件并渲染到页面
import Hi from './view/hi';
ReactDOM.render(<Hi/>,document.getElementById('root'));