小能豆

使用 reactjs 和 babel 导出函数

javascript

我有一个使用 reactjs 的项目,它由 babel 转译。我在我的项目中使用了 es2015 和 react 转换.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>

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


阅读 30

收藏
2024-06-10

共1个答案

小能豆

这与将函数定义为变量相同,但只需在前面添加 export 例如(使用 ES6 语法)

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

或者

export var render = function() {
  return (
    // Some other JSX
  );
};
2024-06-10