Javascript 使用reactjs和babel导出函数

我有一个使用reactjs的项目，它是由babel传输的。我在我的

.babelrc

中使用es2015和react转换。我目前正在进行重构，在我的第一个过程中，我基本上完成了

导出类foo

所需的一切。很多这样的类实际上应该只是函数，所以我试图重写它们，但是我一直得到相同的错误。我的主应用程序文件如下所示：

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

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>

SyntaxError:意外标记

---

我不确定我做错了什么，我的谷歌搜索只找到了其他问题的答案。

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

或者

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

---

您正在以错误的方式编写功能组件

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

函数欢迎（）{
返回你好世界；
}

或

const欢迎=（）=>{
returnHello Wrold

}
出口默认值欢迎；

---

ES6不允许导出默认常量。您必须先声明常量，然后再将其导出。

导出函数与导出类没有什么不同。必须遵守基本规则。

import React from 'react';

/* All function / class names HAS TO BE in CAPS */

var App1 = function (){
    return (
        <div>
            <h1>
                Hello World
            </h1>
        </div>
        )
}

var App2 = function (){
    return (
        <div>
        <h1>World Number 2 </h1>
        </div>
           );
}

var AllApp = function (){
    return (
        <div>
            <App1 />
            <App2 />
        </div>
        );
}

export default AllApp;

函数/类名应大写

只有一条“出口”线路

每个函数返回体都应该有一个包含其他部分的标签。最常用的是标签

这通常有效：从“/App”导入应用程序；其中App.js是我的jsx文件。 您也可以执行显式导入：从“/classhouse.jsx”导入AllApp

js/jsx文件的名称并不重要。它可以是任何情况（下、上）

要从一个文件返回多个函数，您需要再创建一个包含所有其他函数的函数 请参见下面显示多个返回函数的示例。

import React from 'react';

/* All function / class names HAS TO BE in CAPS */

var App1 = function (){
    return (
        <div>
            <h1>
                Hello World
            </h1>
        </div>
        )
}

var App2 = function (){
    return (
        <div>
        <h1>World Number 2 </h1>
        </div>
           );
}

var AllApp = function (){
    return (
        <div>
            <App1 />
            <App2 />
        </div>
        );
}

export default AllApp;

从“React”导入React；
/*所有函数/类名必须大写*/
var App1=函数（）{
返回(
你好，世界
)
}
var App2=函数（）{
返回(
世界第二
);
}
var AllApp=函数（）{
返回(
);
}
导出默认AllApp；

My index.js文件：

import React from 'react';
import ReactDOM from "react-dom";
import AllApp from "./classhouse.jsx"; /* Note: App name has to be in CAPS */
import App from "./App";

const jsx =
<div>
    <AllApp />
    <App />
</div>

ReactDOM.render(jsx, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
从“/classhouse.jsx”/*注意：应用程序名称必须大写*/
从“/App”导入应用程序；
常量jsx=
render（jsx，document.getElementById（“根”）；

谢谢，我很困惑，因为react文档使用了不同的语法，而这是我在ES6中的第一个项目，所以我不太清楚何时使用什么语法。您不必使用ES6语法，但许多示例将使用ES6，因此最好学习等效的语法。

import React from 'react';
import ReactDOM from "react-dom";
import AllApp from "./classhouse.jsx"; /* Note: App name has to be in CAPS */
import App from "./App";

const jsx =
<div>
    <AllApp />
    <App />
</div>

ReactDOM.render(jsx, document.getElementById("root"));