如何在刀片模板中使用 React js
Posted
技术标签:
【中文标题】如何在刀片模板中使用 React js【英文标题】：How to use React js in blade template 【发布时间】：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
【参考方案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
【讨论】：
以上是关于如何在刀片模板中使用 React js的主要内容，如果未能解决你的问题，请参考以下文章
如何在 laravel 刀片模板中使用 JSON 数据进行模型绑定？
如何在刀片模板 laravel 中使用单个文件 vue 组件？