Question

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

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

但这并没有呈现任何东西。

当我这样做时：<div id="example"></div>它会渲染没有道具值的组件，这是正常的。

所以我试图将来自我的控制器的数据传递给我的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

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

3 个答案: