用reactjs和babel导出函数

我有一个使用reactjs的项目，它由babel转译。我使用es2015并对我的.babelrc进行了转换。我目前正在重构，在我的第一次传球中，我基本上都做了export class foo来满足我需要的一切。很多这些类应该只是函数，所以我试图重写它们，但是我仍然得到相同的错误。我主要的应用程序文件看起来有些事情是这样的：用reactjs和babel导出函数

import React, { Component } from 'react'; 

import {Foo, Bar} from './components/ui.js'; 

class Application extends Component { 

    constructor(props){ 
    super(props); 
    this.state = { 
     object: null 
    } 
    } 

    componentDidMount(){ 
    // code 
    } 

    componentDidUpdate(){ 
    // other code 
    } 

    render(){ 
    return(
     <div> 
     <Foo /> 
     <Bar /> 
     </div> 
    ) 
    } 

} 

module.exports = Application

而且我从ui.js进口是这样的：

import React, { Component } from 'react'; 

export class Foo extends Component { 
    constructor(props){ 
    super(props); 
    } 

    render() { 
    return (
     // Some JSX 
    )  
    } 
} 


export class Bar extends Component { 
    constructor(props){ 
    super(props); 

    } 

    render() { 
    return (
     // Some other JSX 
    )  
    } 
}

当我尝试和改变这些出口类之一的功能，例如：

// Note: I have tried a variety of syntax such as function, const, etc... 
export var Bar { 
    render() { 
    return (
     // Some other JSX 
    )  
    } 
}

我得到以下错误：

SyntaxError: Unexpected token <line where I declare a function>

我不知道我做错了什么，我的谷歌搜索只是提出其他问题的答案。

来源

2017-06-01 eignhpants

这与将函数定义为变量相同，但只是将输出添加到前面，例如，（使用ES6语法）

export const render =() => (
    // Some other JSX 
);

或可替代

export var render = function() { 
    return (
    // Some other JSX 
); 
};

来源

2017-06-01 13:51:48

谢谢，我感到困惑，因为反应文档使用不同的语法，这是我在ES6中的第一个项目，所以我不清楚何时使用什么语法。 – eignhpants

您不必使用ES6语法，但许多示例都将使用ES6，因此最好学习相应的语法。 –

你在错误的方式写functional components。

function Welcome() { 
    return <h1>Hello World</h1>; 
}

或

const Welcome =() => { 
    return <p>Hello Wrold</p> 
} 
export default Welcome ;

ES6不允许出口默认常量。您必须首先声明常量然后导出它。

来源

2017-06-01 13:51:58 vijayscode

用reactjs和babel导出函数

回答

相关问题