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/