Laravel 5.5使用來自控制器的數據在刀片視圖中呈現React組件

Question

我的目標是能夠在我的刀片視圖中執行類似的操作。

<Example name="{{ $user->name }}" />

但這並沒有呈現任何東西。

當我這樣做： <div id="example"></div>它渲染沒有props值的組件是正常的。

所以我試圖將來自我的控制器的數據作為道具傳遞給我的React組件。

我不確定它是否可能。

這是我的App.js：

require('./components/Example');

這是我的Example.js組件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-8 col-md-offset-2">
                        <div className="panel panel-default">
                            <div className="panel-heading">Example</div>

                            <div className="panel-body">
                                Hello, {this.props.name}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

Answer 1

我是這樣做的，例如。 在index.blade.php中

<div id="main" data-user_name="{{$user->name}}" />

然后在Main.js

const Main = (props) => {
  return (
    <div>
      <Component {...props} />
   </div>
 );
}

if(document.getElementById('main')) {
  const el = document.getElementById('main')
  const props = Object.assign({}, el.dataset)
  ReactDOM.render(<Main {...props} />, el);
}

Answer 2

這可能是一個比其他人建議的更清潔的解決方案。 我們也不需要使用此方法指定我們傳遞的每個道具。

在您的刀片文件中：

<div id="react-component" data-foo='{{ $foo }}' data-bar='{{ $bar }}'>

另外，如果$foo不是JSON，例如Laravel Collection或數組，我們可以應用另一種方法： $foo->toJson() 。

在您的組件中：

if (document.getElementById('react-component')) {

    const component = document.getElementById('react-component');
    const props = Object.assign({}, component.dataset);

    ReactDOM.render(<ReactComponent {...props} />, component);
}

然后，您可以使用html中的data屬性訪問您傳入的所有道具。 就像其他任何反應一樣，您可以訪問組件內的道具，例如： this.props.foo

Answer 3

你可以這樣做..

@extends('layouts.app')

@section('script')
    <script type="text/javascript">
        ReactDOM.render(<Example name="{{ $user->name }}"/>, document.getElementById('example'));
    </script>
@endsection

@section('content')
    <div id="example"></div>
@endsection

但更好的解決方案是向某些返回json數據的控制器發出AJAX請求。

這個laravel包laracasts / PHP-Vars-To-Js-Transformer將為您提供最佳解決方案