React 学习笔记之定义组件 Component
React 学习笔记之定义组件 Component
我与梦想有个约会
发布于 2020-01-05 14:59:45
发布于 2020-01-05 14:59:45
React 视浏览器每一个显示的项目为一个组件，组件和组件是一层和一层的调用及嵌套关系。要想在界面上显示你要显示的信息，就先要学会组件的定义。
组件是一个独立的 JavaScript 类，他继承与 React 的 Component。首先我们要 import React 和 Component 模块。随后生成一个类继承 React.Component。并实现一个 render 方法，告诉外界你这个组件绘制了哪些内容。最终在文件底部导出这个模块，提供其他模块导入。
// 伪代码
import React, { Component } from 'react';
class CommentBox extends React.Component {
render() {
return (
<div className="ui comments">
.....
</div>
);
}
}
export { CommentBox as default };在 index.js 中引入我们写好的模块需要首先 import 我们编写好的模块。然后直接在 ReactDOM.render 中将我们组件作为第一个参数传递即可。
import React from 'react';
import ReactDOM from 'react-dom';
import CommentBox from './comment/CommentBox';
ReactDOM.render(
<CommentBox />,
document.getElementById('root')
);这样我们自己定义的组件就可以显示出来了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017年3月17日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读