我正在尝试将组件从一个文件导入到 ReactJS 中的另一个文件中。我在下面粘贴了我的代码,显示了我当前如何尝试将 addUser 组件导入到 App.js 中。控制台只显示正在触发的App组件,但不显示addUser。我认为这可能是 webpack 的问题,但我的 package.json 文件中有 webpack。此外,代码可以编译并运行,并且不会引发任何错误。
我的 App.js 文件中的代码:
import React, { Component } from 'react';
import '../styles/App.css';
import * as firebase from 'firebase';
import { addUser } from './addUser.js';
class App extends Component {
render() {
console.log('I was triggered during render App');
return (
<addUser />
);
}
}
export default App;
我的 addUser.js 文件中的代码:
import React, { Component } from 'react';
import '../styles/addUser.css';
import * as firebase from 'firebase';
class addUser extends Component {
render() {
console.log('I was triggered during render addUser');
return (
<div>Hello world!</div>
);
}
}
export default addUser;
package.json:
{
"name": "firestore-practice",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^5.1.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4",
"webpack": "^3.11.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"webpack-dev-server": "^3.1.4"
}
}
我的文件结构: File Structure
最佳答案
应该是
从'./addUser.js'导入addUser
当您将 addUser
导出为默认导出
时。
export default addUser;
//默认导出。
如果您想使用命名导出
,则addUser
应导出为
导出{addUser};
现在,
import { addUser } from './addUser
//应该可以。
关于ReactJS - 无法从另一个文件导入组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51015685/