Как написать подкомпонент (дочерние компоненты) в es6?

Question

Я пытаюсь реорганизовать свое приложение для взаимодействия с 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> 
 
     ); 
 
    } 
 
}

ниже моего Footer:

'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

Либо экспортировать классы верхнего и нижнего колонтитула с умолчанию как этот

export default class Footer 

Или импортировать это так:

import {Footer} from '../pathToFile' 

Итак, есть два способа экспорта в ES6. Первый Экспортируйте по умолчанию который записывается следующим образом:

export default someVariable 

Если экспортировать переменную таким образом, то вы можете импортировать его в любой другой файл, таким образом:

import someVariable from '<path>' 

catch здесь - это то, что вы даже можете импортировать переменную с другим именем. Следовательно,

import someVariable2 from '<path>' 

также предоставит мне несколько переменных. Но есть и ограничение. Вы можете иметь только один экспортный по умолчанию в одном файле

Теперь другой способ экспорта является Названный Экспорт так:

export somevariable 

В этом случае вам нужно импортировать его таким образом :

import {someVariable} from '<path>' 

В этом случае имя переменной не изменяется. Вам нужно импортировать его с тем же именем, которое вы упомянули при экспорте.