文章目录
发现宝藏
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。
需要在Menu
组件的items
数组中添加一个新的对象,该对象代表“学科素材”这个一级菜单项,并且包含一个children
属性,该属性是一个数组,包含二级菜单项“学科管理”。以下是修改后的代码段:
<Menu
onClick={navigateTo}
theme="dark"
mode="inline"
defaultSelectedKeys={['/']}
items={[
...
{
key: '/textbook', icon: <BookOutlined />, label: '教材',
},
{
key: '/subject-material',
icon: <BookOutlined />, // 可以选择合适的图标
label: '学科素材',
children: [ // 二级菜单项
{
key: '/subject-management',
label: '学科管理'
}
]
}
]}
>
</Menu>
在这段代码中,key
属性是必须的,用于标识每个菜单项。可能还需要为“学科素材”选择一个合适的图标,这里使用了<BookOutlined />
,但可以根据需要更换。children
属性定义了“学科素材”下的二级菜单项,这里只有一个“学科管理”项,但可以按照同样的格式添加更多二级菜单项。
接下来是使用 TypeScript (.tsx
) 语法创建“学科管理”组件和配置路由的示例代码。
首先,创建SubjectManagement.tsx
组件:
// SubjectManagement.tsx
import React from 'react';
const SubjectManagement: React.FC = () => {
return (
<div>
<h1>学科管理</h1>
{/* 这里可以添加学科管理的相关内容 */}
</div>
);
};
export default SubjectManagement;
然后,在你的路由配置文件中(假设你使用的是react-router-dom
的Routes
和Route
组件),添加以下代码来配置“学科管理”页面的路由:
// App.tsx 或 RouterConfig.tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import App from './App'; // 你的主应用组件
import SubjectManagement from './SubjectManagement'; // 刚刚创建的学科管理组件
const RouterConfig: React.FC = () => {
return (
<Router>
<Routes>
{/* ...其他路由配置 */}
<Route path="/subject-management" element={<SubjectManagement />} />
{/* ...其他路由配置 */}
</Routes>
</Router>
);
};
export default RouterConfig;
现在,在你的主应用组件App.tsx
中,确保你已经正确配置了navigateTo
函数来处理导航:
import { useNavigate } from 'react-router-dom';
// ...其他导入
function App() {
const navigate = useNavigate();
// ...其他状态和逻辑
const navigateTo = (e: { key: string }) => {
if (e.key === '/batchUpload') {
setCollapsed(true);
}
navigate(e.key);
};
// ...其他组件代码
return (
// ...你的组件结构
);
}
export default App;
最后,确保你的入口文件(如index.tsx
)使用RouterConfig
组件作为顶层组件,或者直接在App.tsx
中配置路由:
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import RouterConfig from './RouterConfig'; // 如果你将路由配置放在单独的文件中
ReactDOM.render(
<React.StrictMode>
<RouterConfig />
</React.StrictMode>,
document.getElementById('root')
);
这样,你就完成了“学科管理”页面的创建和路由配置,使用TypeScript语法。当用户点击“学科素材”下的“学科管理”菜单项时,将会被导航到/subject-management
路径,并看到“学科管理”页面。