从另一个文件导入反应组件？

我是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/[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>

这是我App.js：（从JS /目录）

import MyComp from 'components/MyComp'; 

class App extends React.Component { 
    render() { 
     return (
      <MyComp /> 
     ) 
    } 
} 

ReactDOM.render(
    <App />, 
    document.body 
);

这是我的MyComp.js（From js/components/directory）

class MyComp extends React.Component{ 

    render() { 
     return (
      <div> 
       Hello World! 
      </div> 
     ) 
    } 

} 

export default MyComp;

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

任何建议我做错了什么？

来源

2017-06-25 Omer

我知道这是几个季节晚了，但你仍然有问题从外部文件导入组件？ –

开发React应用程序的推荐方法是使用node，npm和create-react-app。

create-react-app将使您的项目的初始设置与您需要的一切准备就绪。而从其他模块导入组件的许多其他功能将按照预期的方式工作。

来源

2017-06-25 13:47:12

大多数情况下，你有什么应该工作，但我不太清楚为什么它不。我建议将“./”添加到导入位置，但如果这是不正确的，它将会出错并且不会默默离开。

允许我发布一个更简单的版本，我知道不工作：

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

来源

2017-07-24 15:43:45 HoldOffHunger

从另一个文件导入反应组件？

回答

相关问题