By 被删

更新日期:

文章目录
  1. 1. react-bootstrap
    1. 1.1. 安装react-bootstrap
    2. 1.2. 导入相关组件
    3. 1.3. 使用
  2. 2. 创建头部菜单
    1. 2.1. 添加头部组件
    2. 2.2. 添加属性Props
    3. 2.3. 添加state状态
    4. 2.4. setInterval时钟
    5. 2.5. 设置render模板
  3. 3. 结束语

最近在学习使用React作为前端的框架，《React使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录创建头部组件的过程。

react-bootstrap

想要在react中使用bootstrap吗？
如果只是需要使用样式相关的，可以在tempaltes的index.ejs中引用css文件就可以。

1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

如果你还想要使用bootstrap的组件，那么就可以使用react-bootstrap库啦。

安装react-bootstrap

  • 使用npm安装
1
$ npm install react-bootstrap --save
  • 引用css文件
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

导入相关组件

react-bootstrap的组件都需要一一导入。

1
2
3
import Button from 'react-bootstrap/lib/Button';
//或者
import { Button } from 'react-bootstrap';

使用

使用方法如下，其中组件会有大写的标签，以及一定的属性。

1
2
3
<Button bsStyle="success" bsSize="small" onClick={someCallback}>
  Something
</Button>

具体每个组件的使用方法可到组件库中查看。

创建头部菜单

该头部菜单与前一个AngularJS使用笔记中完全一致。如图：
image

添加头部组件

  • 在components文件夹中添加header.jsx文件
  • 定义并输出Header组件
1
2
3
4
5
6
7
8
import React from 'react'; //导入react组件
//定义Header组件
const Header = React.createClass({
  render() {
    return <header>暂时头部</header>;
  }
});
module.exports = Header; //输出Header组件
  • 在components中的index.jsx中使用该组件
1
2
3
4
5
6
import Header from  './header.jsx'; //Header自定义组件
const Index = React.createClass({
  render() {
    return <Header></Header>;
  }
});

此时我们可以在/index路由页面看到头部了。
接下来会运用到react有关的Props/State和生命周期，大家如果不是很清楚可以翻上一篇《React使用笔记3–组件的State/Props与生命周期》进行预热。

添加属性Props

由于菜单的内容不变，我们可以将其写成Props属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
propTypes: { //属性校验器
    menus: React.PropTypes.array, //表示menus属性必须是array，否则报错
    usermenus: React.PropTypes.array, //表示usermenus属性必须是array，否则报错
},
getDefaultProps: function() {
  return { //设置默认属性
    menus: [{
      title: 'index', //title用于储存路由对应的路径
      href: '/index', //href用于设定该菜单跳转路由
      text: '首页', //text用于储存该菜单显示名称
    }, {
      title: 'others',
      href: '/other',
      text: '其他',
    }],
    //usermenus用于储存侧边下拉菜单
    usermenus: [{
      click: function(){}, //click用于设置该菜单点击事件
      text: '退出', //text用于储存该菜单显示名称
    }],
  };
},

添加state状态

像时间这种每500毫秒刷新一次的，我们将其放在state中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
getInitialState: function() {
  return {clock: ''}; //设置初始state值
},
//定义clockRender事件，用于改变this.state.clock值
clockRender: function(){
  let numberStandard = function(num) {
    let _val = Number(num), _num;
    _num = (_val < 10) ? ('0' + _val) : ('' + _val);
    return _num;
  }, _date = new Date(),
    clock = _date.getFullYear() + '年' + (_date.getMonth() + 1) + '月' +
      _date.getDate() + '日' + ' ' + numberStandard(_date.getHours()) + ':' + numberStandard(_date.getMinutes()) +
      ':' + numberStandard(_date.getSeconds());
  this.setState({clock: clock});
},

注意：state不应存储计算后的值，计算应该在render中进行，但由于比较长，本骚年也就这样将就用了。小伙伴们有更好的方法也可以提出来哦。

setInterval时钟

在componentDidMount中进行setInterval时钟。componentDidMount属于react生命周期，在初始化渲染执行之后立刻调用一次，仅客户端有效。
render就是一个模板的作用，他只处理和展示相关的逻辑，如果有业务逻辑，应放在componentWillMount和componentDidMount中执行。

1
2
3
4
5
6
7
8
9
10
11
//进行setInterval时钟
componentDidMount: function(){
  let that = this;			
  this.interval = setInterval(function() {
    that.clockRender();
  }, 500);
},
//组件注销时需销毁定时器
componentWillUnmount: function(){
  clearInterval(this.interval);
},

设置render模板

在这里大家可以看到react-bootstrap的使用方法啦。当然每个组件都是已经在该文件中引入了的。
还有jsx的遍历方法也会在这里展示。

  • 在index.jsx页面引入Header时添加属性active=”index”，作为菜单选中样式的判断
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
render() {
  return (
    let active = this.props.active; //获取父组件传递的props
    <Navbar className="header" fluid>
      <Navbar.Header className="navbar-header">
        <Navbar.Brand>Godbasin</Navbar.Brand>
      </Navbar.Header>
      <Navbar.Collapse id="bs-example-navbar-collapse-1">
        <Nav navbar>     	
        { //遍历头部菜单menus
          this.props.menus.map(function(menu, i) {
            //判断，若title等于active，则加载选中样式
            return (<li key={i} className={ menu.title == active ? "active" : ""}><a href={menu.href}>{ menu.text }<span className="sr-only">(current)</span></a></li>);
          })
        }
        </Nav>
        <Nav navbar pullRight>
          <li><a>{ this.state.clock }</a></li>
          <NavDropdown title="菜单" id="top-aside-menu">
            { //遍历右侧下拉菜单usermenus
              this.props.usermenus.map(function(usermenu,i) {
                return (<MenuItem key={i}>{ usermenu.text }</MenuItem>);
              })
            }
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

结束语

不得不说框架之间的切换还是有很多问题呢，这时候需要的就是坚持不懈地学习和排除bug啦。
当然本骚年本来还想用ES6装装逼的，奈何不熟练的使用后果就是很多报错，看来也还是要加强ES6语法呀。
此处查看项目代码（仅包含app部分）
此处查看页面效果

码生艰难，写文不易，给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. react-bootstrap
    1. 1.1. 安装react-bootstrap
    2. 1.2. 导入相关组件
    3. 1.3. 使用
  2. 2. 创建头部菜单
    1. 2.1. 添加头部组件
    2. 2.2. 添加属性Props
    3. 2.3. 添加state状态
    4. 2.4. setInterval时钟
    5. 2.5. 设置render模板
  3. 3. 结束语