反应导入组件文件夹[重复]

Posted 2023-02-23

【中文标题】反应导入组件文件夹[重复]

【英文标题】：React Importing a component folder [duplicate]

【发布时间】：2018-07-11 06:16:17

【问题描述】：

我目前有我的项目文件夹

app
 - node_modules
 - public
 - src
  - Assets
  - Components
    - profiles
    - homepage
 - gulpfile

在我的主页组件中，我试图将配置文件的整个目录导入到这样的对象中（根据需要动态加载每个组件，但不会加载所有组件）

import Comps from '../profiles/';

还有

import * as Comps from '../profiles/;

但我在编译器中收到错误提示找不到模块：无法解析'../profile.

我想明确一点，profiles 是一个包含组件的文件夹，我想在我的 app.js 文件中选择所有要动态调用的组件。

为什么会这样？

【问题讨论】：

您能否扩展/详细说明您的文件结构。什么是“个人资料”，什么是“个人资料”？

抱歉，我更改了部分代码并重新复制了它，这只是我的一个错误。 @5ar

如果您尝试导入文件夹（如果不是这种情况，请纠正我），这可能是您感兴趣的内容：***.com/questions/29722270/…

哇，谢谢！这正是我想要的，只是没有正确表达

没问题，一些模组应该很快就会将其标记为副本。祝你的项目好运:)

【参考方案1】：

你是否在一个 js 文件中有多个组件，如果有的话 - 你可以这样做：

Profiles.js：

import React from 'react';


export const ViewA = () => 
  return( <div>A VIEW</div>)
;
export const ViewB = () => 
  return( <div>B VIEW</div>)
;
export const ViewC = () => 
  return( <div>C VIEW</div>)
;
export const ViewD = () => 
  return( <div>D VIEW</div>)
;

App.js：

import React,  Component, PropTypes  from 'react'
import * as Profiles from './Profiles';

class App extends Component 
  render()
    return (
      <div>
        <Profiles.ViewA/>
        <Profiles.ViewB/>
        <Profiles.ViewC/>
      </div>
      )
  

export default App;

【讨论】：

我没有，我正在渲染一个段落来测试它。所以我有一个名为 user 的组件并渲染一个

您尝试过 './profiles' 与 '../profile' - 它们在同一个目录中吗？

components文件夹下，有一个首页渲染首页组件。如果单击用户/配置文件的另一个页面的链接，它应该进入一个目录进入组件和用户，那里会有多个组件，但我希望所有组件都可以随时被调用，不一定调用组件