javascript - 在 ReactJS 中导入/导出子组件错误

Question

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

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

import { ContactsList } from './ContactsList';

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

export default class ContactsList extends React.Component {}

我是初学者，请原谅我的知识不足，但我真的很想学习这个以及 React 的力量。请帮助我更好地理解!

--------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"
    ]
}

希望能解决你的问题