React导入组件文件夹

时间:2018-02-01 01:24:25

标签: reactjs import components

我目前有我的项目文件夹

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

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

import Comps from '../profiles/';

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

但我在编译器中遇到错误,说找不到模块:无法解析'../ profile。

我想说明个人资料是一个包含组件的文件夹,我想选择要在我的app.js文件中动态调用的所有组件。

为什么会这样?

1 个答案:

答案 0 :(得分:0)

你是否在一个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;