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将为您提供最佳解决方案