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

呼延弘方

2023-03-14

问题内容：

我是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;

如果我这样尝试，我什么也看不到。而如果我MyComp在App.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;

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

如果您想通过缩短export底部的行来进一步缩短上述内容，则可以使用不太传统的方法来定义此类，如下所示：

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

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

相关阅读

相关文章

相关问答

相关工具

相关文档