我想使用 React js 作为我的 laravel 项目的前端。所以我做了预设：
php artisan preset react
现在我想知道，应该如何在我的刀片视图中实现react组件，以便他们可以访问通过控制器传递给这些视图的数据......
例如，在我的 homeController 中，我传递了一些数据：
return views('theview')->with('datas',$datas);
在 theview.blade.php 我可以像这样访问它们：
{{ $datas }}
但是我如何使用它来更新react组件？
其中一种方式是将数据从 laravel 控制器传递到react组件。
React 组件与document.getElementById('example')Laravel视图页面上的视图 id 元素进行交互。你的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在命令提示符下运行命令。
您想将一些服务器端字符串/数组/集合/任何内容传递给您的 JavaScript
在上述情况下，您可以使用 PackagePHP-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');
}
使用上面的代码，您现在就可以访问foo，user以及age从您的JavaScript。
console.log(foo); // bar
console.log(user); // User Obj
console.log(age); // 29
更多信息请访问：PHP-Vars-To-Js-Transformer