Laravel 5.5 使用来自控制器的数据在刀片视图中渲染 React 组件

Question

我的目标是能够在我的刀片视图中执行类似的操作。

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

但这不会渲染任何东西。

当我这样做时：<div id="example"></div>it 渲染组件时没有正常的 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 集合或数组，我们可以应用其他方法：$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