從另一個文件導入反應組件？

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

從另一個文件導入反應組件？

回答

相關問題