这一篇大概介绍一下React中的组件,那么首先我们要了解什么是组建。
在一个HTML页面当中所有的模块我们都可以理解为一个组件,在React中只要被渲染出来的都是组件。例如一个按钮,一个文本框,都是一个组件,而这些组件在React中是如何具体体现的呢?下面我们就来通过代码示例来介绍组件。
1. 新建一个demo.js,然后输入以下代码
import React, { Component } from 'react';
class Demo extends Component {
render() {
return (<div>你好</div>);
}
}
export default Demo;
上面的代码中导入了一个{ Component },这个是导入React的组件类,而下面的Demo继承了Component,这就表示这个类是一个组件了,但是一个组件必须有两个特征,第一就是上面说的要继承Component,第二就是在这个类里面必须要有render() 这个函数,这个函数的作用就是用来把渲染的内容给前端的。下面的export是把Demo这个组件类暴露给其他的js使用的。(注意组件类开头字母一定要大写,如:Demo)
2. 在index.js里面导入刚才写好的Demo组件类,来渲染给前端,看一看具体的效果是什么样子的。代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './Demo.js';
ReactDOM.render(<Demo />, document.getElementById('root'));
代码中的<Demo />
其实就表示<div>你好</div>
,并且这里必须是大写开头,而document.getElementById('root')
这个表示刚才的组件渲染到该html标签下面。那么我们看一下效果吧
好了以上就是简单的组件介绍了,其实组件也有复合组件,就是很多个标签组合在一起构成的符合组件。具体的在后面练习的时候我们再具体展开介绍。