Laravel React

LaravelからReactへ変数を受け渡す【props】

部分的に利用しているReactへ変数を受け渡す方法です。探しても意外といい方法が出てこなかったので組みました。
ここではpropsとして受け渡します。

<div id="app" data-props="{{ json_encode(['exampleA' => $example_a, 'exampleB' => $example_b]) }}"></div>
if (document.getElementById('app')) {
    const element = document.getElementById('app')
    const props = JSON.parse(element.dataset.props) // data-propsの内容を取得

    ReactDOM.render(
        <Warehousing {...props} />,
        element
    );
}

blade側で受け渡したいpropsのキーと値の配列をjson_encodeしてdata-props属性に割り当てています。
ここで受け渡したものがそのままpropsに入ります。例の場合はthis.props.exampleAとthis.props.exampleBにそれぞれ値が入ります。
React側ではその内容を取得し、render時に展開して渡しています。
data-propsにjson形式で入ってさえいればいいので、バックエンドで配列を作っておいてもいいですし必要であれば静的なHTMLでも可能です。

別途scriptでglobalに書いたりする方法もありますが、Reactのレンダリング対象の要素にまとめておけるのでこれが一番管理しやすいと思います。

-Laravel, React

Copyright© F27P , 2022 All Rights Reserved Powered by AFFINGER5.