g3n1us / laravel-react-sync
使用 Laravel 控制器协调 React 前端以进行更新,并维护通用前端和后端应用程序状态
Requires
- php: ^7.2
- doctrine/dbal: ^2.9
- g3n1us/laravel-model-api: dev-master
- laravel/framework: ^6.0
- laravel/helpers: ^1.1
- laravel/ui: ^1.0
This package is auto-updated.
Last update: 2024-09-16 10:49:05 UTC
README
让您的 React 组件和 Laravel 模型协同工作!
安装
使用 Composer 进行安装
composer require g3n1us/laravel-react-sync
注意:以下步骤在大多数情况下将不再需要
如果您使用的是 Laravel 5.5 或更高版本,并且未禁用自动发现,则该包将自动发现并准备好使用。如果不是这样,请将服务提供者添加到 config/app.php 中的提供者列表中。
'providers' => [ /* * Application Service Providers... */ G3n1us\LaravelReactSync\LaravelReactSyncServiceProvider::class, ]
运行 react-sync 预设
如果您正在安装全新 Laravel 安装上的库,请运行 Artisan 命令 preset 以完成安装
注意:如果这不是全新安装,请不要运行此命令。相反,您可以通过运行
php artisan vendor:publish将必要的文件复制到您的资源目录。
php artisan preset react-sync
按照屏幕上的说明操作,然后运行
npm install && npm run dev
安装完成!
用法
ReactSync 提供了两个基本组件,可以用来替换标准的 React.Component。第一个 MasterComponent 使用 Laravel 视图的数据进行填充。这是通过在应用程序标记的顶部包含 Blade 模板来设置的。它提供了一个全局对象,该对象包含映射到 Blade 视图上下文数据的应用程序数据。此外,该对象还包含对象和方法,提供对底层 Laravel 应用程序数据的访问,例如 Request、定义的 Guard、Route 和认证用户。
这些数据可以在扩展此类的组件中使用。通过传统网页表单(或表单字段)设置的变化将改变您的 state 并触发渲染,就像在 React 中预期的那样。
或者,可以手动修改 ReactSyncAppData.page_data 对象以触发刷新,因为此对象被设置为组件的初始 state。
GitHub Pages URL https://g3n1us.github.io/laravel-react-sync/