使用 reactjs 和 babel 导出函数

IT技术 javascript reactjs ecmascript-6 babeljs
2021-04-20 21:25:42

我有一个使用 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>

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

3个回答

它与将函数定义为变量相同，只是在前面添加 export eg（使用 ES6 语法）

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

或者

export var render = function() {
  return (
    // Some other JSX
  );
};
您不必使用 ES6 语法，但许多示例将使用 ES6，因此最好学习等效的语法。
2021-06-02 21:25:42

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

  1. 函数/类名应该大写
  2. 将只有一个“出口”线。
  3. 每个函数返回体都应该有一个包含其他部分的标签。最常用的是标签。
  4. 这通常有效：从“./App”导入应用程序；其中 App.js 是我的 jsx 文件。您也可以进行显式导入。：从“./classhouse.jsx”导入AllApp；
  5. js/jsx 文件的名称无关紧要。它可以是任何情况（下、上）。
  6. 要从一个文件返回多个函数，您需要再创建一个包含所有其他函数的函数。

请参阅下面显示返回的多个函数的示例。 

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

你functional components写错了。

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

或者 

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

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

其它你可能感兴趣的问题
上一篇React - useState 的 setter 函数可以改变吗？ 下一篇fetch API 总是返回 {"_U": 0, "_V": 0, "_W": null, "_X": null}