Question

我的项目有三个不同的导航栏：

如果用户已登录
一个用于主页
一个用于其他页面

不同之处在于，在主页上，我不想在导航栏中看到登录和注册链接，因为如果用户未登录，则我在页面上有相应的按钮。而对于其他用户，我还有另一个导航栏页面，因为我拥有能够访问该视图并从每个页面添加新条目的用户。问题是：我是否制作多个文件，例如：navbar.jsx，navbarNotHome.jsx，navbarHome.jsx，还是有什么方法可以从同一jsx文件中导出多个类？

Answer 1

我个人会为每个导航栏制作一个单独的文件，但这是一个品味问题。确实可以从同一个jsx文件中导出多个类。

对于仅导出单个类，通常将其导出为：

export default ClassDefault;

然后将其导入为：

import ClassDefault from 'yourpath';

对于多个，您可以像这样将它们捆绑在一起导出为对象（如果您不想的话，默认情况下甚至不必导出类）：

export {
    ClassOne,
    ClassTwo,
    ClassThree
};

export default ClassDefault;

然后您可以按以下方式导入每个类：

import ClassDefault, { ClassOne, ClassTwo, ClassThree } from 'yourpath';

或者如果您只想要ClassTwo：

import { ClassTwo } from 'yourpath';

多个导航栏REACTJS

1 个答案: