從索引文件中導入反應

我不能在我的組件庫中使用索引文件，但從外部使用索引文件。我使用下面的目錄結構：從索引文件中導入反應

+ 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

從索引文件中導入反應

回答

相關問題