Javascript 从另一个文件导入 ReactJS 组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44744673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Import ReactJS component from another file?
提问by Omer
I'm new to React. Want to develop an app using little components in separate files and import them to my App.js
我是 React 的新手。想要使用单独文件中的小组件开发应用程序并将它们导入我的 App.js
I tried but not be able to figure out what I'm doing wrong.
我试过了，但无法弄清楚我做错了什么。
Here is my html:
这是我的 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/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/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>
This is my App.js:(From js/ directory)
这是我的 App.js：（来自 js/ 目录）
import MyComp from 'components/MyComp';
class App extends React.Component {
render() {
return (
<MyComp />
)
}
}
ReactDOM.render(
<App />,
document.body
);
And this is my MyComp.js(From js/components/ directory)
这是我的 MyComp.js（来自 js/components/ 目录）
class MyComp extends React.Component{
render() {
return (
<div>
Hello World!
</div>
)
}
}
export default MyComp;
If I try this way I see nothing. Whereas if I create MyCompclass in App.js it works like a charm.
如果我尝试这种方式，我什么也看不到。而如果我MyComp在 App.js 中创建类，它就像一个魅力。
Any suggestion what am I doing wrong?
任何建议我做错了什么？
采纳答案by HoldOffHunger
For the most part, what you have should work, but I'm not quite sure why it doesn't. I would recommend adding "./" to the import location, but if that was incorrect, it would error out and not silently go away.
在大多数情况下，您所拥有的应该可以工作，但我不太确定为什么不可以。我建议在导入位置添加“./”，但如果这是不正确的，它会出错，而不是默默地消失。
Allow me to post an even simpler version which I know does work:
请允许我发布一个我知道确实有效的更简单的版本：
./index.js :
./index.js ：
import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application'
ReactDOM.render(<Application />, document.getElementById('root'));
./components/Application :
./组件/应用程序：
import React from 'react';
class Application extends React.Component {
render() {
return (
<div className="App">
My Application!
</div>
);
}
}
export default Application;
This should be everything needed to make it work.
这应该是使其工作所需的一切。
If you want to shorten the above even more, by removing the exportline at the bottom, a less traditional approach would be defining the class like this...
如果你想进一步缩短上面的内容，通过删除export底部的行，一个不太传统的方法是定义这样的类......
export default class Application extends React.Component {...}
回答by Pinidbest
you should add: import React from 'react'; to the class Application extends React.Component {...
你应该添加： import React from 'react'; 到类 Application extends React.Component {...
回答by blacktiago
Try with
试试
./components/MyComp
./components/MyComp
if you are using visual studio code, you could explore your components from any .js file by start typing ./ like this:
如果您使用的是 Visual Studio 代码，您可以通过开始键入 ./ 来从任何 .js 文件探索您的组件，如下所示：
