如何在具有不同 CSS 的不同文件中多次使用相同的组件

Question

我创建了一个单独的文件，其中包含将重复多次并导出该文件的数据

export default const Truck = [
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "Door pick-up and delivery",
},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "Heavy weight shipments",

},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "Same day delivery in city limits",

},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "Bullet Service",

},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "Cheque collection and return service",

},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "E-commerce solution",

},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "API Integration",

},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "Real Time tracking on website",

},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "Delivery next day to all the Emirates in UAE",

},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "Personalized service by qualified personnel",

},
{
    icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
    text: "All packages scanned thru Handheld Scanners by trained staff’s, enabling online track & trace",

}

]

然后我创建了单独的组件，通过应用 map function 来获取所有数据

import Truck from "./CssforUlList"
import "./new.scss"
import React from 'react'
export const UlServicesItems = (theme) => {

return (


    < div >
        {
            Truck.map((item, index) => {
                return (
                    <li key={index} >
                        <span >{item.icon}</span>
                        <span >{item.text}</span>
                    </li>

                )
            })
        }
    </div >
)

最后，我在主文件中导入 map function 组件

import { UlServicesItems } from './UlServicesItems/UlServicesItems';
  <UlServicesItems />

现在的问题是如何将单独的 CSS class 应用于组件

Answer 1

我们可以只返回 Truck 数组，而不是在 Truck 数组中定义图标组件

{
    className: "fa fa-truck fa-flip-horizontal",
    text: "Personalized service by qualified personnel",

},

现在您可以在退货中添加图标组件

Truck.map(({className, text}, index) => {
                return (
                    <li key={index} >
                        <span><i className={className} /></span>
                        <span>{item.text}</span>
                    </li>

                )
            })