javascript - es6中如何写子组件(child components)？

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

像这样用默认导出页眉和页脚类

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>'

在这种情况下，不能更改变量名。您需要使用导出时提到的相同名称导入它。