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

川长思鸟来 2022-06-11 01:15 191阅读 0赞

本打算使用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);

效果图大概如下：  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20220611/02b5b9b1ef4f4f6f81c4ed9a68a35928.png