webentwicklung-frage-antwort-db.com.de

Exportieren von Funktionen mit Reaktjs und Babel

Ich habe ein Projekt, das mitreacts arbeitet, das von Babel umgesetzt wird. Ich benutze den es2015 und reagiere Transformationen in meinem .babelrc. Ich bin gerade beim Refactoring und habe in meinem ersten Durchgang export class foo für alles, was ich brauchte, gemacht. Viele dieser Klassen sollten eigentlich nur Funktionen sein, also versuche ich, sie als solche neu zu schreiben, aber ich bekomme immer den gleichen Fehler. Meine Hauptanwendungsdatei sieht in etwa so aus:

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 von ui.js sieht so aus:

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, eine dieser exportierten Klassen in eine Funktion zu ändern, beispielsweise:

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

Ich erhalte folgende Fehlermeldung: 

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

Ich bin nicht sicher, was ich falsch mache, und meine Google-Suchanfragen geben nur Antworten auf andere Probleme.

5
eignhpants

Es ist das Gleiche wie das Definieren der Funktion als Variable, sondern das Hinzufügen eines Exports nach vorne, z. (mit ES6-Syntax)

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

oder alternativ

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

Der Export von Funktionen unterscheidet sich nicht vom Exportieren von Klassen. Grundregeln müssen befolgt werden.  

  1. Funktions-/Klassenname sollte in CAPS stehen
  2. Es wird nur eine "Exportzeile" geben. 
  3. Jeder Funktionsrückgabekörper sollte aus einem einzigen Tag bestehen, der andere Teile umfasst. Am häufigsten wird ein Tag verwendet. 
  4. Dies funktioniert normalerweise: App aus "./App" importieren; wobei app.js meine jsx-Datei ist. Sie können auch einen expliziten Import durchführen. : importiere AllApp aus "./classhouse.jsx";
  5. Der Name der Datei js/jsx spielt keine Rolle. Es kann jeder Fall sein (unterer, oberer). 
  6. Um mehrere Funktionen aus einer Datei zurückzugeben, müssen Sie eine weitere Funktion erstellen, die alle anderen Funktionen umfasst. 

Siehe das Beispiel unten, das mehrere zurückgegebene Funktionen zeigt.  

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

Sie schreiben functional components auf falsche Weise.

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

oder 

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

ES6 erlaubt keine Exportvorgaben für const. Sie müssen zuerst die Konstante deklarieren und dann exportieren.

1
vijayscode