web-dev-qa-db-fra.com

Exportation de fonctions avec reactjs et babel

J'ai un projet utilisant reactjs, qui a été transpilé par babel. J'utilise le es2015 et réagis se transforme dans mon .babelrc. Je suis actuellement en train de refactoriser et lors de mon premier passage, j’ai essentiellement fait export class foo pour tout ce dont j'avais besoin. Un grand nombre de ces classes ne devraient en réalité être que des fonctions. J'essaie donc de les réécrire en tant que telles, mais je continue à avoir la même erreur. Mon fichier principal d'application ressemble à ceci:

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

Et mon import depuis ui.js est comme ceci:

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

Lorsque j'essaie de modifier l'une de ces classes exportées en une fonction, par exemple:

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

Je reçois l'erreur suivante: 

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

Je ne suis pas sûr de ce que je fais mal, et mes recherches sur Google ne font que proposer des réponses à d'autres problèmes.

javascriptreactjsecmascript-6babel
5
eignhpants

C’est la même chose que de définir la fonction comme une variable mais d’ajouter simplement l’export au début, par exemple (en utilisant la syntaxe ES6)

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

ou bien

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

Les fonctions d'exportation ne diffèrent pas de la classe d'exportation. Les règles de base doivent être suivies.  

  1. Le nom de la fonction/classe doit être en CAPS
  2. Il n'y aura qu'une seule ligne "export". 
  3. Chaque corps de retour de fonction doit avoir une seule balise englobant d'autres parties. Le plus couramment utilisé est une balise. 
  4. Cela fonctionne généralement: import App depuis "./App"; où App.js est mon fichier jsx. Vous pouvez aussi faire une importation explicite. : importer AllApp à partir de "./classhouse.jsx";
  5. Le nom du fichier js/jsx n'a pas d'importance. Il peut s'agir de n'importe quel cas (inférieur, supérieur). 
  6. Pour renvoyer plusieurs fonctions à partir d'un fichier, vous devez créer une fonction supplémentaire, qui englobe toutes les autres fonctions. 

Voir l'exemple ci-dessous montrant plusieurs fonctions retournées.  

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;

Mon fichier 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"));
4
Arindam Roychowdhury

Vous écrivez functional components dans le mauvais sens.

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

ou 

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

ES6 n'autorise pas l'exportation par défaut const. Vous devez d'abord déclarer la constante, puis l'exporter.

1
vijayscode