我正在使用 ReactJS，並且我正在嘗試讓抽屜/菜單在每個頁面上顯示我的不同路線（顯然）。
所以我在我的 index.js 中使用 react-router-dom@v6 配置了不同的路由。我可以通過直接在 URL 中輸入鏈接來訪問我的頁面並查看內容（目前是簡單的文本）。
但由於某種原因，我無法顯示我的 Material UI Drawer（在每一頁中）。但是我把我的抽屜叫做BrowserRouter. 我想我錯過了一些重要的事情。
所以這是我創建抽屜的代碼：
//src/pages/navigation/menuDrawer.js
import {React, useState, useEffect} from 'react'
// Material UI
import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { Collapse } from '@mui/material';
import Tooltip from '@mui/material/Tooltip';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';
// Icônes
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';
// Routing
import { Link } from "react-router-dom";
// Remplissage / Informations
const NAVIGATION = require('./navigation.json'); // Data
export default function MenuDrawer() {
// Variables
const [open, setOpen] = useState(false);
// Handlers
// Handler : Ouvrir / Fermer une liste d'item
const handleButtonItem = () => {
setOpen(!open);
}
return (
<Grid>
<Drawer variant="permanent" anchor="left">
{NAVIGATION.map((item) => {
<Grid>
<ListItemButton onClick={handleButtonItem}>
<ListItemIcon>
<img src={item.icone} alt="Logo groupe" />;
</ListItemIcon>
<ListItemText primary={item.nom}></ListItemText>
{open ? <ExpandLess/> : <ExpandMore/> }
</ListItemButton>
<Collapse in={open}>
{item.sections.map((section, index) => {
<Grid>
<Link to={section.url}>
<List>
<Tooltip title={section.descr} placement="right">
<ListItemButton>
<ListItemText primary={section.titre} />
</ListItemButton>
</Tooltip>
</List>
</Link>
</Grid>
})}
</Collapse>
</Grid>
})
}
</Drawer>
</Grid>
)
}
我檢查consoles.log()了我的 "NAVIGATION".json 返回了一些東西並且我正確地處理了它。我有我的數據。即使 React 不斷給我這樣的警告：
Array.prototype.map() 期望箭頭函數 array-callback-return 的返回值
以及我的 index.js 中用於路線的代碼：
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
// React-router-dom V6
import {BrowserRouter, Routes, Route } from 'react-router-dom'
// Import des pages
// import App from './App';
import Accueil from './pages/accueil';
import About from './pages/about';
import Auth from './auth/authentification'
// Import du Drawer
import MenuDrawer from './components/navigation/menuDrawer'
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<MenuDrawer/>
<Routes>
{/* Exemple of Route */}
<Route path="/" element={<Auth/>} />
<Route path="/about" element={<About/>} />
<Route path="*" element={<Accueil/>} />
</Routes>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
如您所見，我在BrowserRouter標籤下調用了我的 MUI 組件
PS：我認為我的handleButtonItem（幾個按鈕的相同變量）有問題，但我認為這不是我當前問題的原因
Array.prototype.map() 期望箭頭函數 array-callback-return 的返回值
警告告訴您，您傳遞給其中一個map()調用的回調沒有返回值。在您的情況下，這是指：
{NAVIGATION.map((item) => { <Grid> ... </Grid> })}
return您通過顯式執行它忘記了一個值：
{NAVIGATION.map((item) => {
return (
<Grid>
...
</Grid>
);
})}
或者通過將{and}替換為(and )，這將導致箭頭函數隱式返回傳遞表達式的結果。
{NAVIGATION.map((item) => (
<Grid>
...
</Grid>
))}
當您使用花括號時，這意味著您傳遞了一個可以包含多個語句的代碼塊。JavaScript 在這種情況下不假定返回值，所以如果你想返回一些東西，你必須顯式地使用return關鍵字，就像一個普通的函數一樣。
如果您不使用花括號，則只能提供一個自動返回的表達式。
numbers.map((n) => {
return n * 2;
})
// Is equivalent to
numbers.map((n) => n * 2)
請參閱：箭頭函數表達式 - MDN 的函數體。
現在想像一下n * 2像他們在 React 中經常出現的那樣一個非常長的表達式。您想將其分佈在多行中。
numbers.map((n) =>
n * 2
)
n * 2為了使箭頭函數的表達式更明顯，人們經常添加額外的括號。
numbers.map((n) => (
n * 2
))
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句