react项目笔记9-----数据展示主要是table的使用2

抽离头部代码，并实现点击跳转到登录页首先创建头部组件TopHeader.jsx 复制default.jsx中核心代码到TopHeader.jsx

头部组件的主要代码，其中有些东西是用不到的
<Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
例如可以删除中间的冗余代码只复制
<Header className="site-layout-background" style={{ padding: 0 }}>
</Header>
复制完成后TopHeader中应该导入的导入，对default中需要删除的进行删除

最后得到的TopHeader.jsx代码如下

import React,{Component} from 'react'
import {withRouter} from 'react-router-dom'
import { Layout, Menu, Dropdown, Avatar} from 'antd';
import 'antd/dist/antd.css';
import {
  UserOutlined
} from '@ant-design/icons';

const { Header} = Layout;

class TopHeader extends Component{
	
	menu = (
    <Menu onClick = { () => {
      this.props.history.push('/login')
    }}>
      <Menu.Item key="3">退出</Menu.Item>
    </Menu>
  	);



	render(){
	return(
	      <Header className="site-layout-background" style={{ padding: 0 }}>
	           <div className="avatarbox">
		          <Dropdown overlay={this.menu} trigger={['click']}>
		            <div className="ant-dropdown-link" onClick={e => e.preventDefault()}>
		              <Avatar size="small" icon={<UserOutlined />} />
		            </div>
		          </Dropdown>
	           </div>
          </Header>
          )
	}

}
export default withRouter(TopHeader);

然后在default中导入即可以应用

import TopHeader from './components/TopHeader'
 <TopHeader/>

最后在default中添加样式会使页面更加的美观

.avatarbox {
  float: right;
  margin-right: 16px;
}
.ant-dropdown-menu  {
  margin: 1px 2px !important;
}