javascript - Laravel 5.5 使用来自 Controller 的数据在 Blade View 中呈现 React 组件

Question

我的目标是能够在我的 Blade View 中执行类似的操作。

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

但这并没有渲染任何东西。

当我这样做时:<div id="example"></div>它呈现没有 props 值的组件，这是正常的。

所以我试图将来 self 的 Controller 的数据作为 Prop 传递到我的 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);
}