RailsのWebpackでReactに挑戦 (3) リスト表示

続きです。・・・ずいぶん時間が経過してますが・・・。

rassy.hatenablog.jp

で、リスト表示ってどうすんの？

さて・・すっかり放置しておりましたが、前回エラーとなっていた部分について、考えてみます。

どうやら、複数のタグをコンポーネントとする場合には、全体を外包する要素が必要な様子。

つまり、これは駄目。

const Hoge = () => (
  <li>hoge</li>
  <li>hoge</li>
  <li>hoge</li>
)

で、これはOK。

const Hoge = () => (
  <ul>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
  </ul>
)

という事で、結局これなら動くぞ・・というのがこちら。

index.html.erb

ontpages#index</h1>
<p>Find me in app/views/frontpages/index.html.erb</p>

<section id="section">
  <h2>sample_list</h2>
</section>

<%= javascript_pack_tag 'list_test' %>

list_test.jsx

import React from 'react'
import ReactDOM from 'react-dom'

const Hoge = () => (
  <ul>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
  </ul>
)

var target = document.getElementById("section").appendChild(document.createElement("ul"));

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hoge/>,
    target,
  )
})

無事表示です。

ただ、これはかなりイケてなくて、レンダリングされる構造は、

<ul>
  <ul>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
  </ul>
</ul>

このようになってしまいます。

おかしさ演出で ul にしていますが、これは div だとしても当然狙った構造にはならないです。

やはりコレにしたい。

<ul>
  <li>hoge</li>
  <li>hoge</li>
  <li>hoge</li>
</ul>

ただ、どうやらReactの render の動きとしては、指定した要素の配下にコンポーネントを差し込む為、仕方がないようです。

要は、一旦差し込んでから、別途コンポーネントの親要素のみを削除すると・・・。

なんと非効率的な・・・と思ったらありました。解決方法。

stackoverflow.com

<React.Fragment> というタグ、または <> で囲んでしまえ・・・ということで、やってみました。

結果・・。

const Hoge = () => (
  <React.Feagment>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
  </React.Feagment>
)

<React.Feagment> の場合、

<> の場合、

・・・・・何これ死にたい。

暫くハマった後で気がついたのですが、

github.com

このあたりを眺めていると・・・

あ・・・バージョン・・・。と思い立って調べてみましたが、

07:05:react_test (master *+)$ npm outdated
Package             Current  Wanted  Latest  Location
@rails/webpacker      3.0.2   3.5.3   3.5.3  react_test
coffeescript         1.12.7  1.12.7   2.3.1  react_test
prop-types           15.6.0  15.6.1  15.6.1  react_test
react                16.1.1  16.4.0  16.4.0  react_test
react-dom            16.1.1  16.4.0  16.4.0  react_test
webpack-dev-server    2.9.4  2.11.2   3.1.4  react_test

やはり取り残されていました・・。そういえば、以前このサンプルを作った時からだいぶ経っていました。 しかし、アプデは何か起こりそうなのと、趣旨が変わってしまいそうなので、一旦アプリを作り直します。

package.json

{
  "name": "react_test",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.5",
    "babel-preset-react": "^6.24.1",
    "prop-types": "^15.6.1",
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

ということで、今回は、こんな感じになりました。

では、いざ表示を・・・

おおお・・・来ました！！！

ちなみに、

const Hoge = () => (
  <>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
  </>
)

↑これは構文エラーのままでした。どうやら、きちんと書かねば駄目っぽいです。

ともあれ、今回はここまでにします。

次はいよいよ動的にリスト表示する段階に行きたいなぁ・・・（ハマらなければ・・・）