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

IT技术 javascript reactjs
2021-05-15 05:35:07

我是 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 中创建类，它就像一个魅力。

任何建议我做错了什么？

3个回答

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

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

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

试试

./components/MyComp

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

在此处输入图片说明

你应该添加： import React from 'react'; 到类 Application extends React.Component {...

其它你可能感兴趣的问题
上一篇初学者的 3D 打印参考 下一篇如何在打印前添加自动床调平？