如何在 blade 模板中使用 React js

Question

我想将 React js 用作我的 laravel 项目的 front-end。所以我做了预设：

php artisan preset react

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

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

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

在 theview.blade.php 中，我可以这样访问它们：

{{ $datas }}

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

Answer 1

其中一种方式是将数据从 laravel 控制器传递给 React 组件。
React 组件与 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。您的 Blade 查看

   ..
   <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 like

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 命令。

Answer 2

您想将一些服务器端 string/array/collection/whatever 传递给您的 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 29=].

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

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

如何在 blade 模板中使用 React js

How to use React js in blade template

laravel

reactjs

view

blade

laravel-blade