React项目记录

1.Layout组件不能撑满屏幕

// App.js
// 注意这里外边不能包裹其他的标签，否则高度设置100%不会生效！
export default function App() {
  return (
      <IndexRouter></IndexRouter>
  )
}

// App.css
#root,
body,
html {
    height: 100%;
}

.ant-layout {
    display: flex;
    width: 100%;
    /* min-height: 100%; */
    min-height: '100vh';
}

2、使用antd组件库中的Layout组件中的Sider组件时：

<Sider trigger={null} collapsible collapsed={collapsed} >
    <div className="logo">全球新闻系统</div>
    <Menu
        defaultSelectedKeys={['/home']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        theme="dark"
        items={menuItems}
    />
</Sider>

【注】：Sider组件中使用了Menu组件，通过items标签属性传递一个数组，按照官方示例给出的形式传入。其中当menu组件可以展开时，即存在children属性，采用递归将传入的数组转化为格式要求。

{
    path: '/home',
    meta: { title: '主页' }
},
{
    path: '/user-manage',
    meta: { title: '用户管理' },
    children: [
        {
            path: '/user-manage/list',
            meta: {
                title: '用户列表'
            },
            children: [
                {
                    path: '/test',
                    meta: {
                        title: '测试一下'
                    }
                }
            ]
        }
    ]
},

function getMenuItems(routes) {
    return routes.map(route => {
        return getItem(
            route.meta.title,
            route.path,
            route.children && getMenuItems(route.children)
        )
    })
}

const menuItems = getMenuItems(routes)

useNavigate

• 【注1】：useNavigate是react-router-dom导出的函数！！！
• 【注2】：react-router-dom，在v5中使用withRouter生成一个高阶组件(拿到props)，实现路由跳转，在v6版本中，出来了一个useNavigate函数，const navigate = useNavigate()，使用navigate可以实现路由的跳转。

json-server

• Step1: 全局安装json-server，模拟后端接口；npm i json-server -g
• Step2：根路径下新建一个db文件夹，创建一个db.json文件模拟数据；
• Step3：结合axios的restful API，发送ajax请求（如果要新增一条数据，发送post请求，不需要自己写id，会自增）；
• Step4：使用json-server --watch db.json --port 指定端口号，可以生成一个特定的网页

【注】：json-server可以进行表关联localhost:5000/rights?_embed=children

Layout布局中，当侧边菜单栏Sider组件单独出现滚动条

<Sider trigger={null} collapsible collapsed={collapsed} >
    // 最外层包裹一个div，使用css样式控制
    <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
        <div className="logo">全球新闻系统</div>
        // Menu组件外层包裹一个div
        <div style={{ flex: 1, overflow: 'auto' }}>
            <Menu
                defaultSelectedKeys={['/home']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                theme="dark"
                items={menuItems}
                onClick={clickHandler}
            />
        </div>
    </div>
</Sider>

还可以设置Sider组件中滚动条的样式

/* 设置Sider组件的滚动条样式 */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    position: absolute;
}

::-webkit-scrollbar-thumb {
    /* background-color: #1890ff */
    background-color: #666
}

::-webkit-scrollbar-track {
    background-color: #ddd
}

antd中的Table组件

// 表格数据源
const dataSource = [{
        key: 3,
        id: 3,
        right_name: '权限管理',
        right_path: '/right-manage',
}]
// 表格中的列数据
const columns = [
    {
        // `title`：列名称
        title: '权限名称',
        // `dataIndex`：要和数据源中的`right_name`项对应
        dataIndex: 'right_name', 
        // `key`：可有可无 
    }
]

• columns中的dataIndex属性，表示dataSource中每一项的哪一个属性填写到表格中的哪一列。
• 如果要自定义列，需要用到render函数，