Exporting functions with reactjs and babel

问题

I have a project using reactjs, which is transpiled by babel. I use the es2015 and react transforms in my .babelrc. I am currently refactoring and in my first pass I basically did export class foo for everything I needed. A lot of these classes should really just be functions, so I am trying to rewrite them as such, but I keep getting the same error. My main application file looks somethings like this:

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

And my import from ui.js is like this:

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
    )      
  }
}

When I try and change one of these exported classes to a function, for example:

// Note: I have tried a variety of syntax such as function, const, etc...
export var Bar {
  render() {
    return (
      // Some other JSX
    )      
  }
}

I get the following error:

SyntaxError: Unexpected token <line where I declare a function>

I am not sure what I am doing wrong, and my google searches are only coming up with answers to other problems.

回答1:

It's the same as defining the function as a variable but just adding export to the front e.g. (using ES6 syntax)

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

or alternatively

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

回答2:

Exporting functions is no different than exporting class. Basic rules must be followed .

1. Function/Class name should in CAPS
2. There will be only one "export" line .
3. Every function return body should have a single tag encompassing other parts. Most commonly used is a tag .
4. This usually works: import App from "./App"; where App.js is my jsx file. You can do an explicit import too . : import AllApp from "./classhouse.jsx";
5. Name of the js/jsx file does not matter. It can be anycase (lower, upper).
6. For returning multiple functions from one file, you need to create one more function , that encompasses all other functions .

See the example below showing multiple functions returned.

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;

My index.js file:

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:

You are writing functional components in wrong way.

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

or

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

ES6 doesn't allow export default const. You must declare the constant first then export it.

来源：https://stackoverflow.com/questions/44309306/exporting-functions-with-reactjs-and-babel