Как мне экспортировать более одного компонента класса с React JS? - PullRequest
Новая
       13

Как мне экспортировать более одного компонента класса с React JS?

0 голосов
/ 28 апреля 2018

Я новичок в React и хотел бы хранить все мои компоненты в одном файле. Как экспортировать более одного компонента и сохранить их в одном файле? 

    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;

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

Вы можете сделать, как сказал Джесс Кенни , или использовать экспорт имен в нижней части вашего файла:

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

А затем используйте его как: 

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

Я советую вам использовать один компонент на файл, чтобы вы могли сохранить свой проект модульным. В ReactJS существует соглашение об экспорте одного компонента из файла, и при его экспорте используется экспорт по умолчанию.

Если это вспомогательный компонент, который используется только в частности, вы можете поместить его в тот же файл, что и функциональный компонент.

0 голосов
/ 28 апреля 2018

Вместо использования строки export default внизу, вы можете поставить экспорт перед каждым определением класса, например export class GreetName..., чтобы включить ваши классы в другой файл, который вы можете использовать import {MyText, GreetName} from 'your/file.js'

...