Laravel 5.5レンダリングコントローラからのデータを含むブレードビューのリアクションコンポーネント

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

あなたはこのようにそれを行うことができます。..

@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

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); 
}