根据数组索引显示图标

Question

以前我根据数组索引对数组中的显示图标进行了硬编码。现在，我将数组放入一个单独的JSON文件中。现在我已经从JSON文件中加载了所有数据。但是图标都是一样的。我需要一些"；否则如果"；根据数组索引加载图标的条件**(硬编码版本与注释在同一文件中给出。(**作为衬衫我需要加载衬衫图标的示例。JSSON文件数组具有示例数据。我需要根据数组索引加载一个图标作为注释部分代码。

我的JS文件

/* eslint-disable react/jsx-pascal-case */
import React, { Fragment, useState, useRef } from "react";
import { Col, Row } from "antd";
import { useNavigate } from "react-router-dom";
import { Menu, Transition } from "@headlessui/react";
import * as Icons from "../../assets/svg/mobile-icons";
import * as Icons2 from "../../assets/svg/icon";
import catData from  './CategoriesData.json'
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
const catWomen = catData.catWomen.map ((data) => {
return(
{ 
id: data.id, 
name: data.name, 
icon: <Icons2.hat02 />, 
childs: data.childs
}
)
}
)
const catMen = catData.catMen.map ((data) => {
return(
{ 
id: data.id, 
name: data.name, 
icon: <Icons2.hat02 />, 
childs: data.childs
}
)
}
)
const catKids = catData.catKid.map ((data) => {
return(
{ 
id: data.id, 
name: data.name, 
icon: <Icons2.hat02 />, 
childs: data.childs
}
)
}
)
/*
const catWomen = [
{ id: 1, name: "See All", icon: <Icons2.seeall />, childs: [] },
{
id: 2,
name: "Clothes",
icon: <Icons2.frock01 />,
childs: ["item2", "item8"],
},
{
id: 3,
name: "Shoes",
icon: <Icons2.shoes06 />,
childs: ["item3", "item7"],
},
{ id: 4, name: "Bags", icon: <Icons2.purse01 />, childs: ["item4", "item6"] },
{
id: 5,
name: "Accessories",
icon: <Icons2.bag05 />,
childs: ["item5", "item2"],
},
{ id: 6, name: "Beauty", icon: <Icons2.hat02 />, childs: ["item6", "item4"] },
];
const catMen = [
{ id: 1, name: "See All", icon: <Icons2.seeall />, childs: [] },
{
id: 2,
name: "Clothes",
icon: <Icons2.shirt1 />,
childs: ["item2", "item8"],
},
{ id: 3, name: "Shoes", icon: <Icons2.shoes1 />, childs: ["item3", "item7"] },
{ id: 4, name: "Bags", icon: <Icons2.bag05 />, childs: ["item4", "item6"] },
{
id: 5,
name: "Accessories",
icon: <Icons2.purse02 />,
childs: ["item5", "item2"],
},
{ id: 6, name: "Grooming", icon: <Icons2.hat />, childs: ["item6", "item4"] },
];
const catKids = [
{ id: 1, name: "See All", icon: <Icons2.seeall />, childs: [] },
{
id: 2,
name: "Clothes",
icon: <Icons2.shirt1 />,
childs: ["item2", "item8"],
},
{
id: 3,
name: "Shoes",
icon: <Icons2.shoes05 />,
childs: ["item3", "item7"],
},
{ id: 4, name: "Bags", icon: <Icons2.bag05 />, childs: ["item4", "item6"] },
{
id: 5,
name: "Accessories",
icon: <Icons2.bow />,
childs: ["item5", "item2"],
},
{
id: 6,
name: "Grooming",
icon: <Icons2.hat03 />,
childs: ["item6", "item4"],
},
];
*/
const Categories = () => {
const navigate = useNavigate();
function SubCategories(props) {
return (
<Transition
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top absolute w-auto rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none">
<div className="py-1 flex">{props.children}</div>
</Menu.Items>
</Transition>
);
}
function DropDownItem(props) {
const items = props.data.map((item) => (
<Menu.Item key={item.id.toString()}>
{({ active }) => (
<div
onMouseOver={() => setChild(item.id)}
onClick={() => {
item.id === 1
? navigate(`/allproducts?mainProductCategory=${props.parent}`)
: navigate(
`/allproducts?mainProductCategory=${props.parent}&category=${item.name}`
);
}}
className={classNames(
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
"grid grid-cols-8 block px-4 py-2 text-xs"
)}
>
<div className="col-span-7">{item.name}</div>
<div className="col-span-1">{item.icon}</div>
</div>
)}
</Menu.Item>
));
return (
<>
<div className="border-r border-gray-300 w-40 text-sm">{items}</div>
</>
);
}
const [child, setChild] = useState(1);
function LoadChilds(props) {
const childs = props.data[props.child - 1];
const subItems = childs.childs.map((item) => (
<Menu.Item key={item.toString()}>
{({ active }) => (
<div
onClick={() => navigate(`/allproducts?mainProductCategory=${props.parent}&category=${childs.name}&subCategory=${item}`)}
className={classNames(
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
"block px-4 py-2 text-sm"
)}
>
{item}
</div>
)}
</Menu.Item>
));
return <div className="w-56">{subItems}</div>;
}
const dropdownRef = useRef();
return (
<Row className="bg-white w-full" style={{ position: "fixed", border: 0 }}>
<Col offset={2}>
<div className="flex w-full gap-6 text-xs cursor-pointer mt-0.5">
<Menu as="div">
<div
className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
onClick={() => navigate(`/allproducts`)}
>
<p>Shop</p>
</div>
</Menu>
<Menu as="div">
<Menu.Button
className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
>
<p>Women</p>
</Menu.Button>
<div ref={dropdownRef}>
<SubCategories>
<DropDownItem data={catWomen} parent="Women" />
<LoadChilds child={child} data={catWomen} parent="Women" />
</SubCategories>
</div>
</Menu>
<Menu as="div">
<Menu.Button
className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
>
<p>Men</p>
</Menu.Button>
<div ref={dropdownRef}>
<SubCategories>
<DropDownItem data={catMen} parent="Men" />
<LoadChilds child={child} data={catMen} parent="Men" />
</SubCategories>
</div>
</Menu>
<Menu as="div">
<Menu.Button
className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
>
<p>Kids</p>
</Menu.Button>
<div ref={dropdownRef}>
<SubCategories>
<DropDownItem data={catKids} parent="Kids" />
<LoadChilds child={child} data={catKids} parent="Kids" />
</SubCategories>
</div>
</Menu>
<Menu as="div">
<div
className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
>
<p>About</p>
</div>
</Menu>
</div>
</Col>
</Row>
);
};
export default Categories;

我的JSON文件

{
"catWomen": [
{
"id"  : 1,
"name"  : "See All",
"childs" : [""]
},
{
"id"  : 2,
"name"  : "Clothes",
"childs" : [ "A" , "B" , "C"]
},
{
"id"  : 3,
"name"  : "Shoes",
"childs" : [ "D" , "E" , "F"]
},
{
"id"  : 4,
"name"  : "Bags",
"childs" : [ "E" , "F" , "G"]
},
{
"id"  : 5,
"name"  : "Accessories",
"childs" : [ "H" , "I" , "J"]
},
{
"id"  : 6,
"name"  : "Beauty",
"childs" : [ "K" , "L" , "M "]
}
],
"catMen": [
{
"id"  : 1,
"name"  : "See All",
"childs" : [""]
},
{
"id"  : 2,
"name"  : "Clothes",
"childs" : [ "Men" , "B" , "C"]
},
{
"id"  : 3,
"name"  : "Shoes",
"childs" : [ "D" , "E" , "F"]
},
{
"id"  : 4,
"name"  : "Bags",
"childs" : [ "E" , "F" , "G"]
},
{
"id"  : 5,
"name"  : "Accessories",
"childs" : [ "H" , "I" , "J"]
},
{
"id"  : 6,
"name"  : "Beauty",
"childs" : [ "K" , "L" , "M "]
}
],
"catKid": [
{
"id"  : 1,
"name"  : "See All",
"childs" : [""]
},
{
"id"  : 2,
"name"  : "Clothes",
"childs" : [ "Kid" , "B" , "C"]
},
{
"id"  : 3,
"name"  : "Shoes",
"childs" : [ "D" , "E" , "F"]
},
{
"id"  : 4,
"name"  : "Bags",
"childs" : [ "E" , "F" , "G"]
},
{
"id"  : 5,
"name"  : "Accessories",
"childs" : [ "H" , "I" , "J"]
},
{
"id"  : 6,
"name"  : "Beauty",
"childs" : [ "K" , "L" , "M "]
}
]
}

Answer 1

如果您将json文件更改为js，并拥有如下内容：

import Icons2 from './somedirectory/file';
const myData = {
catWomen : {
/*existing props*/
icon: <Icons2.shoes05 />
},
catMen : {} 
...
};
export default myData;

您将能够访问组件中的各个图标。JSX组件可以作为对象属性添加到JS文件中，但不能添加到JSON中。