使用babel在JSX中导出默认值失败

Export default failed in JSX with babel

本文关键字：默认值 失败 babel JSX 使用      更新时间：2024-04-03

基本上，我正在尝试在accounts.js中呈现Footer类。（实际上扩展应该是.jsx，但我认为它不会解决这里的问题。）

首先我在accounts.jsx:中导入页脚

import React from "react";
import {Footer} from "../utils/footer.js";
import {SEEMIKO_LOGO} from "./const.js";
export default React.createClass({
  render: function () {
    return (
        <div>
          <div className="container">
            <div className="row login-div">
              <div className="col-lg-offset-2 col-lg-3"
                   style={{marginTop: '2vw'}}>
                <img src={SEEMIKO_LOGO}/>
              </div>
              <div className="col-lg-offset-6">
                {this.props.children}
              </div>
            </div>
          </div>
          <Footer/>
        </div>
    );
  }
});

然后我在下面定义footer.js：

import React from "react";
// var Footer = React.createClass({
export default React.createClass({
  render: function () {
    return (
        <footer className="footer">
          <div className="container">
            <p className="copyright" style={{color: "black"}}>
              C 西米糕 Seemiko Inc. 2014 - Current. 浙XXXXX
            </p>
            <ul className="footer-links">
              <li>
                <a href="#">用户反馈</a>
              </li>
              <li>
                <a href="#">使用帮助</a>
              </li>
              <li>
                <a href="#">关于我们</a>
              </li>
            </ul>
          </div>
        </footer>
    );
  }
})
// works
// export {Footer};

奇怪的是，如果我在footer.js中使用export default，它就会失败。但一旦我用export Footer切换到var Footer，一切都设置好了。知道吗？

谢谢！

如果您有默认导出，您还需要使用默认导入：

import Footer from '...';
相关文章：