问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

从另一个文件导入 ReactJS 组件？

社区维基
1
新手上路，请多包涵

我是 React 的新手。想要在单独的文件中使用小组件开发应用程序并将它们导入我的 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;

如果我尝试这种方式，我什么也看不到。而如果我在 App.js 中创建 MyComp 类，它就像一个魅力。

任何建议我做错了什么？

原文由 Omer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptreactjs
阅读 295
2 个回答
得票最新
社区维基
1
✓ 已被采纳

在大多数情况下，您所拥有的应该可以工作，但我不太确定为什么不行。我建议将“./”添加到导入位置，但如果不正确，它会出错并且不会默默消失。

请允许我发布一个更简单的版本，我知道它确实有效：

./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 {...}

原文由 HoldOffHunger 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

试试

./组件/MyComp

如果您使用的是 visual studio 代码，则可以通过开始键入 ./ 来探索任何 .js 文件中的组件，如下所示：

在此处输入图像描述

原文由 blacktiago 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题