Question

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

php artisan preset react

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

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

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

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

{{ $datas }}

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

Answer 1

这种方法之一是将数据从laravel控制器传递给反应组件。
一个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 View

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

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

您的示例组件在资源/资产/ 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 命令。

Answer 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

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

2 个答案: