如何在 Blade 模板中使用 React js

Question

如何在 Blade 模板中使用 React js

6

我希望使用React.js作为我的Laravel项目的前端。因此，我按照以下预设方式进行了设置：

php artisan preset react

现在我想了解如何在我的blade视图中实现React组件，以便它们可以访问通过控制器传递给这些视图的数据...

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

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

在view.blade.php文件中，我可以像这样访问它们:

{{ $datas }}

但是我该如何使用它来更新React组件？

- Barbell

将这些数据作为 React 组件的属性传递。 - Ikram Ud Daula

@extends('layouts.app')@section('content') <example-component datas={{ $datas }}></example-component> @endsection - Ikram Ud Daula

2个回答

3

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

在上述情况下，您可以使用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

For more visit: PHP-Vars-To-Js-Transformer

- dipenparmar12

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ikram - Ud - Daula · Accepted Answer

这是从Laravel控制器传递数据到React组件的一种方法。
一个React组件与视图ID元素document.getElementById('example')在您的Laravel视图页面上交互。您的Laravel控制器可能如下所示。

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

确保将数据控制器以JSON格式传递给视图。您的Blade视图

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

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

像这样，在resources/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命令。