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

Question

我正在嘗試將我的react應用程序從es5重構為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> ); } } 

頁眉和頁腳組件未呈現。

Answer 1

像這樣默認導出您的Header和Footer類

export default class Footer

或以這種方式導入：

import {Footer} from '../pathToFile'

因此，在ES6中有兩種導出方法。 第一個是默認導出 ，其編寫方式如下：

export default someVariable

如果以這種方式導出變量，則可以通過以下方式將其導入任何其他文件中：

import someVariable from '<path>'

這里的要點是，您甚至可以使用其他名稱導入變量。 因此，

import someVariable2 from '<path>'

也會給我一些變量。 但是也有一個限制。 單個文件中只能有一個導出默認值

現在，導出的另一種方法是命名導出，如下所示：

export somevariable

在這種情況下，您需要通過以下方式導入它：

import {someVariable} from '<path>'

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