如何在刀片模板中使用 React js答案

【问题标题】：How to use React js in blade template如何在刀片模板中使用 React js
【发布时间】：2018-09-25 08:35:44
【问题描述】：

我想使用 React js 作为我的 laravel 项目的前端。所以我做了预设：

php artisan preset react

现在我想知道，应该如何在我的刀片视图中实现 react 组件，以便它们可以访问通过控制器传递给这些视图的数据...

例如，在我的 homeController 中，我传递了一些数据：

return views('theview')->with('datas',$datas);

在 view.blade.php 我可以像这样访问它们：

{{ $datas }}

但是我如何使用它来更新反应组件？

【问题讨论】：

将该数据作为反应组件的属性传递。
点赞@extends('layouts.app') @section('content') <example-component datas={{ $datas }}></example-component> @endsection

标签： laravel reactjs view blade laravel-blade

【解决方案1】：

其中一种方式是您将数据从 laravel 控制器传递给反应组件。
一个反应组件与您的 laravel 视图页面上的视图 id 元素 document.getElementById('example') 交互。你的 Laravel 控制器 喜欢。

class HomeController extends Controller
{
   public function index(){
      $data = [
        'john', 'doe'
      ];
      return view('welcome')->with('data', json_encode($data));
   }
}

确保将数据控制器传递给以 json 格式查看。您的刀片视图

   ..
   <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <div id="example" data='{{ $data }}'></div>

    <script src="js/app.js"></script>
</body>

你在 reources/assets/js/components/Example.js 中的 示例组件 喜欢

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Example extends Component {
  constructor(props){
      super(props);
      console.log('data from component', JSON.parse(this.props.data));
  }
  render() {
      return (
          <div className="container">
            .....
          </div>
      );
  }
}  

if (document.getElementById('example')) {
   var data = document.getElementById('example').getAttribute('data');
   ReactDOM.render(<Example data={data} />, document.getElementById('example'));
}

请确保，当您更改 Example.js 组件代码时，您必须在命令提示符下运行 npm run dev 命令。

【讨论】：

但是为什么数据要作为 json 传递，你能告诉我吗？
因为 HTML 标签属性只保存字符串作为值。 <div id="example" data='{{$data}}'></div>
很好的解释
对于该特定示例，最好参考 YouTube 视频。 youtube.com/watch?v=Un3DbIvqPoA

【解决方案2】：

您想将一些服务器端字符串/数组/集合/任何内容传递给您的 JavaScript

在上述情况下，您可以使用 Package PHP-Vars-To-Js-Transformer 该软件包由知名站点 laracasts 维护，因此您不必担心错误和副作用。

这里是成功安装和启动包后的简单示例。

use JavaScript; // declare name space.

// Class method 
public function index()
{
    JavaScript::put([ 
        'foo' => 'bar',
        'user' => User::first(),
        'age' => 29
    ]);

    return View::make('hello');
}

使用上面的代码，您现在可以通过 JavaScript 访问 foo、user 和 age。

console.log(foo); // bar
console.log(user); // User Obj
console.log(age); // 29

更多信息请访问：PHP-Vars-To-Js-Transformer

【讨论】：