在ReactJS中導入/導出子組件錯誤

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配置文件中。 你能嘗試使用裝載機：“babel-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