Exportieren von Funktionen mit reactjs und babel

Habe ich ein Projekt mit reactjs, die transpiled von babel. Ich benutze die es2015 und reagieren, verwandelt sich in meinem .babelrc. Ich bin derzeit die Umgestaltung und in meinem ersten Durchgang habe ich im Prinzip hast export class foo für alles, was ich brauchte. Eine Menge von diesen Klassen sollte wirklich nur Funktionen, so bin ich versucht, zu umschreiben, Sie auch als solche, aber ich bekomme immer den gleichen Fehler. Meine Hauptanwendung Datei sieht etwas so:

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

Und mein import aus ui.js ist wie folgt:

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

Wenn ich versuche, und ändern Sie diese exportierten Klassen um eine Funktion, zum Beispiel:

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

Bekomme ich die folgende Fehlermeldung:

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

Ich bin nicht sicher, was ich falsch mache, und meine google-Suche nur kommen mit Antworten auf andere Probleme.

InformationsquelleAutor eignhpants | 2017-06-01

  1. 5

    Es ist die gleiche wie die Definition der Funktion als variable, sondern nur das hinzufügen export der front z.B. (mit ES6-syntax)

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

    oder alternativ

    export var render = function() {
  return (
    //Some other JSX
  );
};
    Danke, ich war immer verwirrt, weil die reagieren docs verwenden eine unterschiedliche syntax, und dies ist mein erstes Projekt in ES6, so bin ich nicht ganz klar, Wann welche syntax.
    Sie nicht haben die Verwendung von ES6-syntax aber viele Beispiele verwenden ES6 so ist es am besten zu lernen, die äquivalente syntax.

    InformationsquelleAutor Chris Herring

  2. 4

    Exportieren von Funktionen ist nichts anderes als Export-Klasse. Grundlegende Regeln, die befolgt werden müssen .

    1. Funktion/Klasse name sollte in CAPS
    2. Gibt es nur eine "export" - Zeile .
    3. Jede Funktion zurückgeben Körper sollte einen einzelnen tag umfasst weitere Teile. Am häufigsten verwendet wird, ist ein tag .
    4. Dies funktioniert in der Regel: import App from "./App"; wo App.js ist mein jsx-Datei.
      Sie können eine explizite import zu . : import AllApp von "./classhouse.jsx";
    5. Namen der js/jsx-Datei spielt keine Rolle. Es kann sein, anycase (untere, Obere).
    6. Zum zurückgeben mehrerer Funktionen aus einer Datei, die Sie benötigen, um erstellen Sie eine weitere Funktion , das umfasst alle anderen Funktionen .

    Siehe das Beispiel unten zeigt mehrere Funktionen zurückgegeben. 

    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;

    Meine index.js Datei:

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

    InformationsquelleAutor Arindam Roychowdhury

  3. 1

    Sie schreiben functional components im falschen Weg.

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

    oder 

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

    ES6 nicht erlauben, export Standard-Konst. Deklarieren Sie die Konstante erst dann exportieren.

    InformationsquelleAutor vijayscode

Schreibe einen Kommentar