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>
        );
    }
}

下面是我的页脚：

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

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

如何在es6中编写子组件（子组件）？

1 个答案: