ReactJS 中的导入/导出子组件错误答案

【问题标题】：Importing/Exporting child component error in ReactJSReactJS 中的导入/导出子组件错误
【发布时间】：2016-08-18 13:10:57
【问题描述】：

我只是想将一个子组件导出并导入到我的 rot 目录 (App.js) 中并在浏览器中呈现它，但我在终端中收到此错误消息“找不到模块：错误：无法解析”文件'或'目录'”。我不明白我打错了什么或为什么我不能将我的孩子导入我的 App.js。

已尝试解决此问题，但没有结果。我一直在我的“App.js”中对此进行测试以获得更明确的名称但不起作用：

import { ContactsList } from './ContactsList';

我也试过在我的“ContactsList.js”中输入这个但没有结果：

export default class ContactsList extends React.Component {}

我是初学者，请原谅我的知识，但我真的很想学习这个和反应的力量。请帮助我更好地理解！

--------App.js---------

import React from 'react';
import ReactDOM from 'react-dom';
import ContactsList from './ContactsList';


class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Contacts List</h1>
                <ContactsList />
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

--------ContactsList.js---------

import React from 'react';
import ReactDOM from 'react-dom';

class ContactsList extends React.Component {
    render() {
        return (
            <ul>
                <li>Joe 555 555 5555</li>
                <li>Marv 555 555 5555</li>
            </ul>
        )
    }
}
export default ContactsList;

--------webpack.config.js---------

module.exports = {
    entry: './src/App.js',
    output: {
        path: __dirname,
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test:/\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

在您的 ContactsList.js 文件中，使用 <div> 包装 <ul>

也在你的 webpack 配置文件中。你可以尝试使用 loader : "babel-loader" 代替 loader: 'babel'（别忘了安装 babel-loader 包）

同时删除查询部分并尝试使用以下设置创建一个单独的 .babelrc 文件：

{
    "presets" : [
        "react",
        "es2015"
    ]
}

希望能解决你的问题

【讨论】：

好的。我应该将“预设”放在“模块：”内但放在“加载器：”之外吗？
不，只是删除查询和预设部分。在 webpack 配置文件的同一级别创建一个名为 '.babelrc' 的文件。然后把： { "presets" : [ "react", "es2015" ] } 在那个 .babelrc 文件中

【解决方案2】：

根据 es6 模块机制，默认模块应该是不带 {} 导入

import ContactsList  from './ContactsList';

然后像这样导出

export default class ContactsList extends React.Component {}

但我猜你是在 .jsx 扩展名上尝试 babel，但是它接缝您正在使用 ContactsList.js

只需将 .jsx 改为 .js 即可

--webpack.config.js

module.exports = {
    entry: './src/App.js',
    output: {
        path: __dirname,
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test:/\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};

希望有效果

【讨论】：

【解决方案3】：

您需要对 webpack.config.js 文件进行一些更改。先替换

    test:/\.jsx?$/,

与

    test: /\.(js|jsx)$/,

第二次导入模块如下

import ContactsList  from 'path-of-the-file';

但您需要提供实际路径。为了获得正确的路径，根据我们使用的文本编辑器，有许多可用的插件。我正在使用https://github.com/sagold/FuzzyFilePath

【讨论】：