web-dev-qa-db-ja.com

React JSを使用して複数のクラスコンポーネントをエクスポートするにはどうすればよいですか？

Reactを使い始めたばかりで、すべてのコンポーネントを1つのファイルに保存したいのですが、複数のコンポーネントをエクスポートして同じファイルに保存するにはどうすればよいですか？

    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

Jess Kenneyのように実行するか、ファイルの下部で名前のエクスポートを使用できます。

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'

プロジェクトをモジュール式に保つことができるように、ファイルごとに1つのコンポーネントを使用することをお勧めします。 ReactJSでは、ファイルから1つのコンポーネントをエクスポートし、それをデフォルトのエクスポートとしてエクスポートするのが慣例です。

特定でのみ使用されるヘルパーコンポーネントの場合は、機能コンポーネントと同じファイルに配置できます。

16
Denys Kotsur

下部のexport default行を使用する代わりに、export class GreetName...のように各クラス定義の前にエクスポートを配置して、import {MyText, GreetName} from 'your/file.js'を使用して別のファイルにクラスを含めることができます。

3
Jess Kenney