web-dev-qa-db-fra.com

Comment exporter plus d'un composant de classe avec React JS?

Je ne connais pas React et je souhaite conserver tous mes composants dans un seul fichier. Comment exporter plusieurs composants et les conserver dans le même fichier?

    import React, { Component } from "react";

class MyText extends Component {
  render() {
    return (<div>
      <h1>
        Component</h1>
      <p>This class component is named MyText. I can re-use it's code by simply Rendering (fancy name for calling) it by it's class name and I won't have to re type it, however many times I will need it.</p>
    </div>);
  };
}

class GreetName extends Component {
  render() {
    return (
      <div>
       <h1>Hello, {this.props.name}</h1>;
       </div>
    );
  };
}

export default MyText;
javascriptreactjsfunctioncomponentses6-class
6
Tony Carbetta

Vous pouvez faire comme Jess Kenney dit ou utiliser l'exportation de noms en bas de votre fichier:

SomeComponent.js

import React, { Component } from "react";

class MyText extends Component {
  render() {
    return (<div>
      <h1>
        Component</h1>
      <p>This class component is named MyText. I can re-use it's code by simply Rendering (fancy name for calling) it by it's class name and I won't have to re type it, however many times I will need it.</p>
    </div>);
  };
}

class GreetName extends Component {
  render() {
    return (
      <div>
       <h1>Hello, {this.props.name}</h1>;
       </div>
    );
  };
}

export { MyText, GreetName };

Et puis utilisez-le comme:

import { MyText, GreetName } from './SomeComponent'

Je vous conseille d'utiliser un composant par fichier, afin que vous puissiez garder votre projet modulaire. Dans ReactJS, c'est une convention d'exporter un composant à partir d'un fichier, et de l'exporter comme exportation par défaut.

Si c'est un composant auxiliaire qui n'est utilisé que dans le particulier, vous pouvez le mettre dans le même fichier que le composant fonctionnel.

16
Denys Kotsur

Au lieu d'utiliser le export default ligne en bas, vous pouvez mettre export avant chaque définition de classe, comme export class GreetName... puis pour inclure vos classes dans un autre fichier, vous pouvez utiliser import {MyText, GreetName} from 'your/file.js'

3
Jess Kenney