1つのファイルに複数のクラスコンポーネントが存在するので、クラス毎にファイル分割がしたいです。

Question

前提・実現したいこと

現在はSampleファイルにSampleクラス、Inputクラス、Submitクラス、Listクラス、と複数のクラスが存在しています。
以下のようなファイル構成にしたいです。

• Sampleファイル
• atomsフォルダ
  -- Inputファイル
  -- Submitファイル
  -- Listファイル

該当のソースコード

import React, {Component} from 'react';

export default class Sample extends Component
{
    render()
    {
        return(<div>
            <Input />
        </div>);
    }
}

class Input extends Component
{
    constructor(props)
    {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            value: ''
        };
    }

    handleChange(event)
    {
        this.setState({
            value: event.target.value,
        });
    }

    render()
    {
        return(
            <div>
                <input type="text" value={this.state.value} onChange={this.handleChange} />
                <Submit value={this.state.value} />
            </div>
        );
    }
}

class Submit extends Component
{
    constructor(props)
    {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            todos: []
        };
    }

    handleClick(value)
    {
        this.setState({
            todos: [...this.state.todos, value]
        });
    }

    render()
    {
        return(
            <>
                <input type="submit" value="Submit" onClick={() => this.handleClick(this.props.value)} />
                <List todos={this.state.todos} />
            </>
        );
    }
}

class List extends Component
{
    render()
    {
        return(
            <div>
                <h3>ToDo</h3>
                <ul>
                    {this.props.todos.map((todo) => <li key={Math.random()}>{todo}</li>)}
                </ul>
            </div>
        )
    }
}

発生している問題・エラーメッセージ

以下のように分割してみました。
importする為に'export default'を指定する必要があり、更に、例えばInputクラスではSubmitをimportする必要があります。
概要のソースコードに載っているコードをそっくりそのまま分割したいです。

import React, {Component} from 'react';
import Submit from './Submit';

export default class Input extends Component
{
    constructor(props)
    {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            value: ''
        };
    }

    handleChange(event)
    {
        this.setState({
            value: event.target.value,
        });
    }

    render()
    {
        return(
            <div>
                <input type="text" value={this.state.value} onChange={this.handleChange} />
                <Submit value={this.state.value} />
            </div>
        );
    }
}

補足情報

React:Ver.16.12.0

Comments

[hoshi-takanori]

「以下のように分割してみました。」の通りに分割すればいいと思いますけど、質問は何でしょうか？
ちなみに、クラス定義と export は分けて書くことができます。つまり、class Sample extends Component { ... } の後ろ（前はダメだった）に export default Sample; と書くことができます。

[退会済みユーザー]

プログラムの開始部分に、
import React, {Component} from 'react';
import Submit from './Submit';
や
export default …
を追加する必要があります。これを追加しなくてもいい分割方法があるのでは？と思い質問しました。

[hoshi-takanori]

残念ながら、ありません。

[退会済みユーザー]

そうなのですね。ありがとうございます。
ベストアンサーを選びたいので、回答部分に投稿をお願いします。

Answer 1

プログラムの開始部分に、

import React, {Component} from 'react';
import Submit from './Submit';
や
export default …
を追加する必要があります。これを追加しなくてもいい分割方法があるのでは？と思い質問しました。

とのことですが、残念ながらありません。各ファイルに必要な import や export を書く必要があります。

Comments

[退会済みユーザー]

ありがとうございます。