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

这可能是比其他人建议的稍微干净的解决方案。我们也不需要指定使用此方法传入的每个道具。

在您的刀片文件中：

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

附带说明一下，如果$foo不是 JSON，例如 Laravel 集合或数组，我们可以应用其他方法：$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 2

我这样做是这样的。在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 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