Question

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

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

Answer 1

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

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

或者

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

Answer 2

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

功能/类名称应在CAPS中
只有一个＆＃34; export＆＃34;线。
每个函数返回体都应该包含一个包含其他部分的标记。最常用的是标签。
这通常有效：从＆＃34; ./ App＆＃34 ;;导入应用程序其中App.js是我的jsx文件。您也可以进行显式导入。：从＆＃34; ./ classhouse.jsx＆＃34;;
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"));

Answer 3

您正在以错误的方式撰写functional components。

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

或

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

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

使用reactjs和babel导出函数

3 个答案: