使用 reactjs 和 babel 导出函数答案

【问题标题】：Exporting functions with reactjs and babel使用 reactjs 和 babel 导出函数
【发布时间】：2017-11-02 16:57:48
【问题描述】：

我有一个使用 reactjs 的项目，由 babel 转译。我使用 es2015 并在我的 .babelrc 中做出反应转换。我目前正在重构，在我的第一遍中，我基本上为我需要的一切做了export class 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

而我从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>

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

【问题讨论】：

标签： javascript reactjs ecmascript-6 babeljs

【解决方案1】：

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

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

或者

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

【讨论】：

你不必使用 ES6 语法，但很多例子都会使用 ES6，所以最好学习等效的语法。

【解决方案2】：

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

函数/类名应该大写
将只有一个“导出”行。
每个函数返回体都应该有一个包含其他部分的标签。最常用的是标签。
这通常有效：从“./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;

我的 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"));

【讨论】：

【解决方案3】：

你写错了functional components。

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

或

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

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

【讨论】：