react项目实战（权限模块开发六）semantic-ui-react 加入到开发环境中

本打算使用antd的组件来开发模块界面，但今天被semantic-ui-react提供的table组件给震撼了，实在是比antd的table好看多了，就果断决定打算用semantic-ui-react来作为基础组件，而antd作为辅助组件来进行开发。

第一步就是安装semantic-ui-react

cnpm i --save-dev semantic-ui-react

第二步自然是安装css了

cnpm install semantic-ui-css --save

第三步：写个测试界面看看效果，里面用到了semantic+antd

import React,{Component} from 'react'
import { Button, Icon,Menu,Table } from 'semantic-ui-react'
import { connect } from 'react-redux'
import 'semantic-ui-css/semantic.min.css';
import {GoPageTitle,GoPageNav} from '../../components/goingComponent'
import { Pagination } from 'antd';
import 'antd/dist/antd.css';

class Role extends Component {
state = {};
handleItemClick = (e, { name }) => this.setState({activeItem: name});

render() {
const  propsObjs =this.props;
let pageNavList=propsObjs.userMd.userMd.pageNavList;

const { activeItem } = this.state;
return (
<div>

<div id="page-title">
<h1 className="page-header text-overflow">角色信息管理</h1>
</div>

<GoPageNav pageNav={pageNavList}/>

<div style={{paddingLeft:"10px",paddingRight:"10px"}}>
<Menu>
<Menu.Item
name='editorials'
active={activeItem === 'editorials'}
onClick={this.handleItemClick}
>
<Icon disabled name='users'/>
添加
</Menu.Item>

<Menu.Item
name='reviews'
active={activeItem === 'reviews'}
onClick={this.handleItemClick}
>
<Icon disabled name='users'/>
修改
</Menu.Item>

<Menu.Item
name='upcomingEvents'
active={activeItem === 'upcomingEvents'}
onClick={this.handleItemClick}
>
删除
</Menu.Item>
</Menu>

<Table celled striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell colSpan='1'>用户地址</Table.HeaderCell>
<Table.HeaderCell colSpan='1'>名称</Table.HeaderCell>
<Table.HeaderCell colSpan='1'>序号</Table.HeaderCell>
</Table.Row>
</Table.Header>

<Table.Body>
<Table.Row>
<Table.Cell collapsing>
<Icon name='folder' /> 用户名称
</Table.Cell>
<Table.Cell>用户名称</Table.Cell>
<Table.Cell collapsing textAlign='right'>10 hours ago</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Icon name='folder' /> 用户地址
</Table.Cell>
<Table.Cell>用户名称</Table.Cell>
<Table.Cell textAlign='right'>10 hours ago</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Icon name='folder' /> build
</Table.Cell>
<Table.Cell>用户名称</Table.Cell>
<Table.Cell textAlign='right'>10 hours ago</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Icon name='file outline' /> 用户地址
</Table.Cell>
<Table.Cell>用户名称</Table.Cell>
<Table.Cell textAlign='right'>10 hours ago</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Icon name='file outline' /> 用户地址
</Table.Cell>
<Table.Cell>用户名称</Table.Cell>
<Table.Cell textAlign='right'>10 hours ago</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
<Pagination defaultCurrent={1} total={50} />
</div>
</div>
)
}
}
export default connect((userMd) => ({userMd}))(Role);

效果图大概如下：