如何在ReactJS中导出多个列表？

Question

import React from 'react';

var nav1 = [
    "SERVICE APP",
    "ONLINE ORDER:+91 7303434043",
    "CONTACT US",
    "STATUS LOCATOR",
    "MUMBAI",
    "TRACK ORDER",
]

var nav2=[
    {
        'title':"HAFELE KARIA",
        'image': "./images/img1."
    },
    {
        'title':"BOAT WATCH",
        'image': "./images/img2."
    },
    {
        'title':"SONY TV",
        'image': "./images/img3.",
    },
    {
        'title':"WASHING MACHINE",
        'image': "./images/img4."
    },
    {
        'title':"AIRPODS PRO",
        'image': "./images/img5."
    },
    {
        'title':"JBL",
        'image': "./images/img6."
    },
    {
        'title':"LG OFFER",
        'image': "./images/img7."
    },
    {
        'title':"LG BUY FROM HOME",
        'image': "./images/img8."
    },
    {
        'title':"PLAYSTATION 5",
        'image': "./images/img9."
    },
    {
        'title':"OPPO RENO",
        'image': "./images/img10."
    },
]
export default {
    nav1,
    nav2,
}

这里有两个列表，一个用于navbar-1，另一个用于navbar-2。这是我的'data.js‘代码，我想导出这两个列表，但我不能这样做！

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

import React from 'react';
import './index.css';
import nav1img from "./images/nav1.png";
import { FaMobileAlt } from 'react-icons/fa';
import nav1 from './data';
import nav2 from './data';

const Navbar1 = () => {
    console.log(nav2);
    return (
        <div className="row1">
            <div className="left">
                <img src={nav1img} alt="Product" />
            </div>
            <a href="#"><FaMobileAlt className="icon1" /></a>
            <div className="right">
                {
                    nav1.map((item, index) => {
                        return <>
                            <a href="#" key={index}>
                                {item}
                            </a>
                            <h1>|</h1>
                        </>
                    })
                }
            </div>
            
        </div>

    );
}

export default Navbar1;

这是我无法导入第一个和第二个列表的组件

如何导出和导入nav1和nav2列表？

Answer 1

通常我会这样做：

data.js

export const nav1 = [...];
export const nav2 = [...];

然后在组件中：

import { nav1, nav2 } from '../path/to/data';

Answer 2

导出/导入语法一开始可能会令人困惑，而导出对象由于在中混合了一些对象语法而变得更加混乱。

有两种类型的导入/导出-命名和默认。

默认

export default Thing;
*********************
import Thing from 'path/to/thing'

您可以在导入时将Thing重命名为您想要的任何名称。

名为的

export Thing;
*********************
import { Thing } from 'path/to/thing'

在这里，你必须使用花括号命名为Thing。

你的场景

您正在使用默认导出，并且正在导出对象。

const obj = {
  nav1: [1,2],
  nav2: [3,4]
};
export default obj;

要导入它，您需要使用默认的导入语法：

import obj from 'path/to/obj'

然后，您就有了访问列表的对象：

obj.nav1

替代方案

如果您想简化，您可以只使用2个命名的导出，并像您当前尝试的那样分别导入它们：

export { 
  nav1,
  nav2,
};

import { nav1 } from './data';
import { nav2 } from './data';

你可以阅读更多关于exports in the MDN docs的内容。