从索引文件中导入反应

我不能在我的组件库中使用索引文件，但从外部使用索引文件。我使用下面的目录结构：从索引文件中导入反应

+ components 
    | index.js 
    + atoms 
    | index.js 
    + label 
     | label.jsx 
     | label.css 
    + hoc 
    | index.js 
    + withFrame 
     | withFrame.jsx 
     | withFrame.css 
    + clientSpecificStyle 
    | index.js 
    | clientLabel.jsx

索引文件只是导出默认导入

// just one sample 
export { default as Label } from './label/label;

我想要做的是能的典型（基本）的造型来区分组件和客户端特定的样式。我clientLabel只是一个框架包围的标签：

import React, {Component} from 'react'; 

// this doesn't work 
import Label from '../atoms/index'; 
import withFrame from '../hoc/index'; 

// this works 
import Label from '../atoms/label/label'; 
import withFrame from '../hoc/withFrame/withFrame'; 

@withFrame 
class ClientLabel extends Component { 
    render() { 
    return (
     <Label {...this.props}>{this.props.children}</Label> 
    ); 
    } 
} 

export default ClientLabel;

当从所用的“外”（即位于相同的文件夹层次结构组件演示页）使用从组件的索引文件的进口，它可以作为预期。但我无法从ClientLabel中的索引文件中导入HoC和Label（失败，组件/函数未定义）。但是，当直接使用HoC和Label组件文件进行导入时，它可以正常工作。最上面的索引文件（对于整个库）看起来像这样

export * from './atoms/index; 
export * from './clientSpecificStyle/index'; 
//...

当我想到这个项目发展成许多独立的组件，它会是使用索引文件全部进口，因此让我更方便按我认为合适的方式重新组织代码，只更改相应索引文件中的一行代码。

是否有可能使此工作？

我的WebPack（诉3.6）配置工作 - 除了这个问题 - 如预期。只是为了清楚起见，这里的DEV-配置：

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server', 
    path.resolve('src', 'demo', 'demo.jsx') 
    ], 

    output: { 
    path: path.resolve('dist'), 
    filename: 'bundle.js', 
    }, 

    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'react-hot-loader/webpack!babel-loader', 
     exclude: [/node_modules/] 
     }, 
     { 
     test: /\.css$/, 
     loaders: [ 
      'style-loader?sourceMap', 
      'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
     ] 
     } 
    ] 
    }, 

    devServer: { 
    contentBase: './dist', 
    hot: true 
    }, 

    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: path.resolve('src', 'demo', 'index.html'), 
     filename: 'index.html', 
     inject: 'body' 
    }), 
    new webpack.NamedModulesPlugin() 
    ] 
};

来源

2017-10-09 Myzyrael

你不需要添加索引。并且你改变了默认值为Label，所以新的导入应该是从'../ atoms''''导入{Label}希望是有道理的 –

@ReiDien我不敢相信我错过了......'从'../ atoms /（index）'导入{Label}做了诀窍......如果你回答这个问题，我会接受你的答案。 – Myzyrael

所以只是为了完整性：导入正确的做法是

import {Label} from '../atoms

，因为我已经做了一个叫出口。

所有的荣誉去@ReiDien

来源

2017-10-24 17:54:45 Myzyrael

从索引文件中导入反应

回答

相关问题