React 组件封装

初窥

通过 create-react-app 构建的 React 工程,其中的 src 目录是我们关注的重点,它是我们编写代码的地方,我们现在需要做的,就是把里面的东西全部删除,然后一步步的尝试自己构建。

首先我们创建一个 index.js

// 导入依赖
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// 将到在浏览器中显示的内容
class Index extends Component {
  render() {
   return <h1>hello react</h1>
  }
}

// 渲染内容
ReactDOM.render(<Index />, document.getElementById('root'));

记得保持你的环境是 npm start 的状态。


组件

组件是元素复用的思想,也是组件化框架的最只要特征和解决的问题。我们现在要把网页的菜单栏看出一个组件,然后独立的抽象出来,这样做之后,任何需要菜单的页面只要导入该组件,就可以实现代码复用,让维护和扩展都变得简单。

新建一个 header.js 文件。

import React, { Component } from 'react';

// 每一个 extends Component 的 class 都是一个组件
class Header extends Component {
 render() {
   return (<div>我的菜单栏</div>)
 }
}

// 导出组件
export default Header;

/*
 支持这种操作
 export default eader extends Component {}
*/

修改 index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header.js'; // 引入 Header 组件

class Index extends Component {
  render() {
   return (
    <div>
      <Header /> {/* 使用 Header 组件 */}
      <h1>hello react</h1>
    </div>
    )
  }
}

ReactDOM.render(<Index />, document.getElementById('root'));

以上就是 React 组件的封装。

React 教程 React 安装 React 组件 React JSX React 样式 React 生命周期 React State React Props React 事件 React Refs React Router