Reactのコンポーネントの定義でJSX部分を別ファイルに分けることは可能ですか？

Question

やりたいことのイメージは以下のようなことなのですが。

Hoge.js

import React from 'react'
export default() => {
  ・・・
  // hoge.jsxを読み込む
}

hoge.jsx

<div>・・・</div>

Comments

[m0a]

なぜそんなことをしたいのか意図を教えて下さい。例えばjsxの利便性が失われますがhtml2jsx等で文字列からjsxに変換でもかまわないんでしょうか？

[yoppy0066]

コーダーと分業するときに、ロジックがまじっていると戸惑うのではというところで分けたらどうだろうと考えました。このような実装はあまりしないもなのでしょうか？

Answer 1

よっ

こんな構造のロジックがあまり理解出来てないですが、
試してみました:)

yoppy0066さんが書いたコードはそのまま使えないです。
Hoge.jsはComponentとして使いたいですよね？ Componentに成らないと使えないです。Renderっていうメソードも使えないです。
Hoge.jsはComponentじゃなかったら、Hoge.jsはこうなります。こんな構造は意味がないと思います。

import React from 'react'
import HogeTplt from './hoge.jsx'
export default() => <HogeTplt />

下記は別の方法の提案です。

Hoge.js

import React, { Component } from 'react'
import HogeTplt from './hoge.jsx';

export default class extends Component {
        render() {
                return ( <HogeTplt /> )
        }
}

hoge.jsx

class HogeTplt extends Component {
        render() {
                return (
                        <div>
                                Hoge Template
                        </div>
                )
        }
}

export default HogeTplt

追記 : 提案２

下記の提案はyoppy0066さんの一番近い構造だと思います。

Hoge.js

import React, { Component } from 'react'
import HogeTplt from './hoge.jsx';

export default class extends Component {
        render() {
                return HogeTplt
        }
}

hoge.jsx

import React from 'react'
export default (
        <div>
                Hoge Template
        </div>
)

:)