patlamontagne/react-dot-php

react-dot 的 PHP 适配器

维护者

详细信息

github.com/patlamontagne/react-dot-php

源代码

问题

安装: 135

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

v0.1.2 2023-05-11 20:46 UTC

Requires

  • php: ^7.2|~8.0.0|~8.1.0|~8.2.0

MIT a98e14472d538811159200235a290ac048766fbc

  • Patrick Lamontagne <dev.woop@patricklamontagne.ca>

wordpresslaravelreact

This package is auto-updated.

Last update: 2024-09-12 00:14:13 UTC

README

点号分隔的后端驱动 React 组件。

这意味着什么？这意味着您可以在前端添加多个单独的 React 组件，并直接从后端发送初始属性。

react-dot 适用于无法利用 inertiajs 的 SPA 方法的项目，或者对于需要轻松添加一些 React 交互性而不必重建整个项目的现有服务器端渲染项目。

JavaScript 库

在您的客户端使用 JS 库动态渲染点组件。 https://github.com/patlamontagne/react-dot

安装

composer require patlamontagne/react-dot-php

渲染一个点

每次 Dot::render 都将生成一个唯一的 React 根，JS 库将使用它来初始化您的组件。

use ReactDot\Dot;

// will echo the component directly
Dot::render('Layout/NavigationBar', ['mode' => 'dark']);

// accepts functions
Dot::render('Layout/NavigationBar', [
    'mode' => 'dark',
    // lazy
    'auth' => function() {
        if ($user = user()) {
            return [
                'user' => $user,
            ];
        }
    },
]);

// get the resulting string
echo Dot::build('Layout/NavigationBar', ['mode' => 'dark']);

共享属性到所有点

共享属性将被发送到页面上的所有点组件。

// share a key/value prop
Dot::share('mode', 'dark');

// also accepts functions...
Dot::share('auth', function() {
    if ($user = user()) {
        return [
            'user' => $user,
        ];
    }
});

// ...and arrays
Dot::share([
    'title' => 'Welcome',
    // lazy
    'auth' => function() {
        if ($user = user()) {
            return [
                'user' => $user,
            ];
        }
    },
]);