Question

我是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类，它就像魅力一样。

有什么建议我做错了吗？

Answer 1

在大多数情况下，你所拥有的应该是有效的，但我不太确定为什么不这样做。我建议在导入位置添加“./”，但如果这不正确，则会出错并且不会自动消失。

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

./ 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;

这应该是使其运作所需的一切。

如果你想进一步缩短上述内容，通过删除底部的export行，一种不太传统的方法就是定义这样的类......

export default class Application extends React.Component {...}

Answer 2

您应该添加：从'react'导入React；类应用程序扩展了React.Component {...

Answer 3

尝试

./ components / MyComp

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

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

3 个答案: