reactjs - ReactJS - 无法从另一个文件导入组件
问题描述
我试图在 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;
包.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"
}
}
我的文件结构: 文件结构
解决方案
它应该是
import addUser from './addUser.js'
当您导出addUser
为default export
.
export default addUser;
//默认导出。
如果你想使用named export
应该addUser
导出为
export {addUser};
现在,
import { addUser } from './addUser
// 它应该可以工作。
推荐阅读
- c++ - 有没有更好的方法来反转循环中布尔值的值?
- java - 模拟 MSPaint 程序在 java 中绘制以前的笔画而不是仅绘制当前笔画
- google-sheets - 多行两列的总和
- javascript - 从消息中心访问消息
- java - 检查接口的两个对象是否相等(不覆盖)
- email - 重叠的多部分“无媒体类型”
- mysql - (SQL) 在另一个字符串列中查找实体
- arrays - 为什么我会收到“数组索引必须是正整数或逻辑值”。
- python-3.x - 我正在编写一个函数,该函数将几个字典和一个数据框作为输入并输出一个新的数据框
- python - 获取列表中给定项目的计数(不使用 numpy)