Export-Standard in JSX mit Babel

Question

Fehler Ich versuche, eine Footer-Klasse in accounts.js Rendering. (Eigentlich sollte die Erweiterung .jsx sein, während es wird nicht das Problem hier lösen denke ich.)

Zuerst habe ich die Fußzeile in accounts.jsx importieren:

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

Dann definiere ich footer.js unter:

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

Die komische Sache ist, wenn ich export default in footer.js verwende, wird es gescheitert. Aber sobald ich auf var Footer mit export Footer umschalte, alles eingestellt. Irgendeine Idee?

Vielen Dank!

Answer 1

Wenn Sie einen Standardexport haben Sie auch einen Standard-Import verwenden müssen:

import Footer from '...';