从另一个文件导入ReactJS组件？
我是新来的。希望使用单独文件中的小组件开发应用程序，并将它们导入到我的App.js中
我试过了，但找不出我做错了什么。
这里是我的html:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<script type="text/babel" src="js/App.js"></script>
</body>
</html>这是我的App.js: (来自js/目录)
import MyComp from 'components/MyComp';
class App extends React.Component {
render() {
return (
<MyComp />
)
}
}
ReactDOM.render(
<App />,
document.body
);，这是我的MyComp.js (来自js/components/目录)
class MyComp extends React.Component{
render() {
return (
<div>
Hello World!
</div>
)
}
}
export default MyComp;如果我这样做，我什么也看不见。然而，如果我在MyComp中创建App.js类，它的工作原理就像一种魅力。
有什么建议我做错什么了吗？
回答 3
Stack Overflow用户
发布于 2017-07-24 15:43:45
在大多数情况下，您所拥有的应该会正常工作，但我不太清楚为什么不行。我建议将"./“添加到导入位置，但是如果不正确，它就会出错，而不是悄悄地离开。
请允许我发布一个更简单的版本，我知道这是可行的：
./index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application'
ReactDOM.render(<Application />, document.getElementById('root'));./组成部分/应用程序：
import React from 'react';
class Application extends React.Component {
render() {
return (
<div className="App">
My Application!
</div>
);
}
}
export default Application;这应该是使其发挥作用所需的一切。
如果您想进一步缩短上面的内容，通过删除底部的export行，一种不那么传统的方法是像这样定义类.
export default class Application extends React.Component {...}Stack Overflow用户
发布于 2020-02-15 23:46:38
试着
/组件/MyComp
如果您使用的是visual代码，您可以通过开始键入任何.js文件来探索组件。/如下所示：
Stack Overflow用户
发布于 2018-12-11 12:25:11
您应该添加:导入从' React '；类应用程序扩展React.Component {.
https://stackoverflow.com/questions/44744673
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号