[英]React onDragStart doesn't fire in Material UI Autocomplete component
[英]Material UI list component doesn't show
我想為移動視圖顯示一個 Material UI 列表作為我的下拉菜單(一個 Material UI 抽屜組件)的一部分,但由於某種原因,實際列表沒有顯示。
該列表的代碼如下所示:
const menuItems = [
{
text: 'Home',
path: '/'
},
{
text: 'About',
path: '/about'
}
];
...
<List>
{menuItems.map(item => (
<ListItem
button
key={item.text}
onClick={() => history.push(item.path)}
>
<ListItemText>{item.text}</ListItemText>
</ListItem>
))}
</List>
這是應該顯示我的列表項的結果,但我得到了這個奇怪的圖標:
這是我的 package.json 文件:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.1",
"@material-ui/icons": "^4.11.2",
"@material-ui/styles": "^4.11.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"firebase": "^8.7.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-timeago": "^6.2.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
——
編輯:
這是一個有效的 CodeSandbox 示例
錯誤在於導入。
正確的:
import List from "@material-ui/core/List";
您從"@material-ui/icons/List"
導入了List
。 您應該刪除它並從"@material-ui/core"
導入List
:
import { List } from "@material-ui/core";
這是可執行和正確的示例: https : //codesandbox.io/s/floral-snowflake-ub04r
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.