Question

我只是想将子组件导出并导入到我的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']
            }
        }]
    }
};

Answer 1

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

同样在您的webpack配置文件中。你能尝试使用 loader：“babel-loader”而不是 loader：'babel'（别忘了安装babel-loader软件包）

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

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

希望这可以解决您的问题

Answer 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']
            }
        }]
    }
};

希望它有效

Answer 3

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

    test:/\.jsx?$/,

与

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

其次导入模块如下

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

但是你需要提供实际的路径。为了使路径正确，有许多插件可用，具体取决于我们使用的文本编辑器。我正在使用https://github.com/sagold/FuzzyFilePath

在ReactJS

3 个答案: