bladeからreactにデータを渡す

この記事は
難解なやり方から簡単なやり方に大きくリファクタリングできたため、
2021-12-5に丸ごと書き換えました。

　サンプルの概要

Reactにカレンダーコンポーネントがあって、そこにlaravelからbladeを通してデータをpropさせるとする。

controller

普通にモデルから全件取得してviewへ渡す。

MeetingController.php

use App\Models\Meeting;

        $meetings = Meeting::all();

        return view('web.top.index')->with(compact(
            'meetings',
        ));

blade側

idはReact.rendar()で使うもの。
data-hoge-huga の形の属性にしておくと jsからdataset.hogeFuga の形(HTMLのケバブケースがjsで勝手にキャメルケースに変換される)でアクセスできるので、ここに通常のblade記法でモデルのデータを流し込む。

meeting.blade.php

    <div id="calendar" data-calendar-meetings="{{ $meetings }}"></div>

React側

rendarメソッドに直接 getElementByIdを書かずに、ソースコードの上の方に先に定義しておく。
それで取得したDOMからさっきbladeで書いたdatasetが取れる。

取得しただけだと、シリアライズされた文字列型のjsonなので、JSON.parseメソッドでオブジェクト型に変換する。
あとはmeetings.title みたいな感じでjsとして使える。

calendar.tsx

import React from 'react';
import { render } from "react-dom";

const targetDom = document.getElementById('calendar');
const str_meetings = targetDom?.dataset.calendarMeetings;
const meetings = JSON.parse(str_meetings ?? '');

export default function Calendar() {
  return (
    <>
      ~ 生成したいDOMのjsx  ~
    </>
}

render(<Calendar/>,targetDom);