根据数组索引显示图标

Question

之前我根据数组索引硬编码了数组中的显示图标。现在我将数组放入一个单独的 JSON 文件中。现在我已经加载了 JSON 文件中的所有数据。但是图标都是一样的。我需要一些“else if”条件来根据数组索引加载图标** （硬编码版本在与注释相同的文件中给出。） **作为示例，如果衬衫我需要加载衬衫图标。 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.

根据数组索引显示图标

Icon display according to array index

javascript

arrays

indexing

json