如何在es6中編寫子組件（子組件）？

我正在嘗試將我的反應應用程序從es5重構爲es6，但是在渲染函數中，我保留了我的組件和組件，當我重構爲ES6時，這些組件不會顯示在我的頁面中。在谷歌搜索，但未能得到妥善解決，下面是我的代碼如何在es6中編寫子組件（子組件）？

'use strict'; 
 

 
import React from 'react'; 
 
import { Router, Route, Link, hashHistory } from 'react-router'; 
 
import Header from '../Header/header'; 
 
import Footer from '../Footer/footer'; 
 

 
export class Main extends React.Component { 
 
    render(){ 
 
     return (
 
      <div> 
 
       <Header /> 
 
       <div> 
 
        {this.props.children} 
 
       </div> 
 
       <Footer /> 
 
      </div> 
 
     ); 
 
    } 
 
}

下面

是我的頁腳：

'use strict'; 
 

 
import React from 'react'; 
 

 
export class Footer extends React.Component { 
 
    render(){ 
 
     return (
 
      <div> 
 
       <footer> 
 
        <div className="panel panel-default"> 
 
         <div className="panel-footer container"> 
 
          &copy; {year} All rights reserved 
 
         </div> 
 
        </div> 
 
       </footer> 
 
      </div> 
 
     ); 
 
    } 
 
}

頁眉和頁腳組件不被渲染。

來源

2016-11-27 Chaitu

你以前輸入過嗎？ –

是的，我已經導入 – Chaitu

該代碼[適合我]（https://jsfiddle.net/0pms6uqv/）。你能用一個** runnable ** [mcve]使用Stack Snippets（'<>'工具欄按鈕）顯示問題來更新你的問題嗎？（Stack Snippets支持React和JSX） –

要麼與默認導出頁眉和頁腳類這樣

export default class Footer

或導入這樣說：

import {Footer} from '../pathToFile'

所以有在ES6出口兩個方面。第一個是默認出口它是這樣寫的：

export default someVariable

如果導出一個變量這種方式，你可以用這種方式將其導入任何其他文件：

import someVariable from '<path>'

的在這裏抓住的是，你甚至可以用一個不同的名稱導入你的變量。因此，

import someVariable2 from '<path>'

也會給我一些變化。但也有一個限制。 你可以在一個單一的文件

只有一個出口默認現在出口的另一種方法是名爲export這樣的：

export somevariable

在這種情況下，你需要輸入這種方式：

import {someVariable} from '<path>'

在這種情況下，變量名稱不能改變。您需要使用與您在導出時提到的名稱相同的名稱導入它。

來源

2016-11-27 18:00:30 Swapnil

如何在es6中編寫子組件（子組件）？

回答

相關問題