reactjs - 从 props 数组 no-unused-vars 导入图像
问题描述
我希望这个反应组件根据作为道具传入的字符串数组显示导航图像。但是我的短绒被炸了
Line 4:8: 'home' is defined but never used no-unused-vars
Line 5:8: 'menu' is defined but never used no-unused-vars
Line 6:8: 'bookings' is defined but never used no-unused-vars
Line 7:8: 'stock' is defined but never used no-unused-vars
Line 8:8: 'orders' is defined but never used no-unused-vars
Line 9:8: 'profile' is defined but never used no-unused-vars
Line 10:8: 'logout' is defined but never used no-unused-vars
有没有办法只导入在道具上传递的图像并满足 linter?
import home from '../images/home.svg';
import menu from '../images/menu.svg';
import bookings from '../images/bookings.svg';
import stock from '../images/stock.svg';
import orders from '../images/orders.svg';
import profile from '../images/profile.svg';
import logout from '../images/logout.svg';
interface IProps {
navItems: string[];
}
function Nav({ navItems }: IProps) {
return (
<div className='Nav'>
{navItems.map((item, index) => {
return <img src={item} id={String(index)} />;
})}
</div>
);
}
export { Nav };
navItems 数组如下所示,并准确映射到图像名称
const navItems = [
'home',
'menu',
'bookings',
'stock',
'orders',
'profile',
'logout',
];
<Nav navItems={navItems} />
我的 eslint 文件...
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "prettier"],
"extends": ["eslint:recommended", "google", "prettier"],
"rules": {
"prettier/prettier": 2,
"require-jsdoc": 0,
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": ["error"]
}
}
我也尝试过这种疯狂但我的打字错误
import { useHistory } from 'react-router-dom';
import home from '../images/home.svg';
import menu from '../images/menu.svg';
import bookings from '../images/bookings.svg';
import reports from '../images/stock.svg';
import refunds from '../images/orders.svg';
import profile from '../images/profile.svg';
import logout from '../images/logout.svg';
interface PropsShape {
navItems: string[];
}
interface ImagesShape {
home: ImageData;
menu: ImageData;
bookings: ImageData;
reports: ImageData;
refunds: ImageData;
profile: ImageData;
logout: ImageData;
}
function Nav({ navItems }: PropsShape) {
const history = useHistory<History>();
const navImages: ImagesShape = [
{ home },
{ menu },
{ bookings },
{ reports },
{ refunds },
{ profile },
{ logout },
];
return (
<div className='Nav'>
{navItems.map((item, index) => {
return (
<img
src={navImages[item]}
id={String(index)}
onClick={() => history.push(`/${item}`)}
alt={item}
/>
);
})}
</div>
);
}
export { Nav };
解决方案
推荐阅读
- python - 使用 ipywidgets 显示来自数据帧的某些数据
- npm - Ngrok 和 npm 解释 Wix API AuthO
- android - 自定义键盘:指定的消息队列同步屏障令牌尚未发布或已被移除
- javascript - 将返回的 Observables 转换为角度的自定义类数组
- javascript - 需要点击元素两次
- c# - 在 VSCode 中更改活动的 C# .NET 项目配置和平台
- c++ - 我的程序有一个保存配置文件的 GUI,如何双击此配置文件以直接使用配置数据加载 GUI?
- dom - yii2 Multiple model and select2 non-unique id问题
- python - 如何在霍夫线不交叉/覆盖的图像中找到间隙?
- python - Ansible shell 模块在目标服务器上是否需要 python?