README

WpReactLoader是一个用于简化在WordPress中加载React前端项目并将数据传递给它们的Composer库，这个过程称为本地化脚本。

WpReactLoader解决了以下问题：脚本可能在页面加载后操作DOM，并且您会收到如下错误

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

功能

• 在WordPress中轻松加载React前端项目。
• 简化数据传递（脚本本地化）到前端。

安装

要安装WpReactLoader，您的机器上需要安装Composer。如果您还没有安装，可以从这里下载。

安装Composer后，您可以在终端中运行以下命令来安装WpReactLoader

composer GeekyCodeLab/WpReactLoader

用法

安装库后，您可以在WordPress插件或主题中使用它，如下所示

$loader = new \GeekyCodeLab\WpReactLoader\UI([
    'assets_url' => 'path/to/your/assets',
    'js_file' => 'main.js',
    'data' => [
        'api_url' => 'https://your-api-url.com',
    ],
]);

echo $loader->load_resource();

这将从指定的JavaScript文件加载React应用程序，并将指定的数据通过名为gcl_settings的全局JS变量传递。您可以通过在构造函数数组中包含'localization_variable'键来设置全局变量名称。

load_resource方法生成HTML代码，并将其作为字符串返回。此输出可以直接在您的代码中使用，无论是通过echo输出还是通过在短代码中返回。

您还可以设置、获取和删除数据参数，如下所示

$loader->set_param('new_param', 'new_value');
echo $loader->get_param('new_param'); // Outputs: new_value
$loader->remove_param('new_param');

选项

在创建新的UI类实例时，您可以将选项数组传递给构造函数。以下是所有可能的选项

• assets_url（字符串）：您的JavaScript文件所在的目录的URL。默认为空字符串。
• js_file（字符串）：您的JavaScript文件的名称。默认为空字符串。
• data（数组）：您想要传递给JavaScript文件的数据数组。默认为空数组。
• container_id（字符串）：您的React应用程序将加载的HTML容器的ID。默认为'app'。
• container_class（字符串）：您的React应用程序将加载的HTML容器的类。默认为空字符串。
• include_admin_ajax_url（布尔值）：是否将admin-ajax.php URL包含在传递给前端的数据中。默认为true。
• localization_variable（字符串）：存储您的数据的全局JavaScript变量的名称。默认为'gcl_settings'。

以下是使用这些选项的示例

$loader = new \GeekyCodeLab\WpReactLoader\UI([
    'assets_url' => 'path/to/your/assets',
    'js_file' => 'main.js',
    'data' => [
        'api_url' => 'https://your-api-url.com',
    ],
    'container_id' => 'myApp',
    'container_class' => 'myClass',
    'include_admin_ajax_url' => false,
    'localization_variable' => 'myData',
]);

echo $loader->load_resource();

这将从指定的JavaScript文件将React应用程序加载到ID为'myApp'和类为'myClass'的HTML容器中，并将指定的数据传递给名为'myData'的全局JavaScript变量。admin-ajax.php URL将不会包含在数据中。

方法

UI类提供了以下方法

• __construct(array $options = [])：构造函数接受一个选项数组。有关更多详细信息，请参阅选项部分。

• set_param(string $key, mixed $value)：此方法允许您在数据数组中设置一个参数。$key是参数的名称，$value是参数的值。

• get_param(string $key)：此方法允许您从数据数组中获取一个参数。$key是参数的名称。如果参数不存在，则返回null。

• load_resource()：此方法加载React应用程序。它返回一个包含加载JavaScript文件的script标签以及React应用将挂载的div的HTML字符串。

以下是如何使用这些方法的示例

$loader = new \GeekyCodeLab\WpReactLoader\UI([
    'assets_url' => 'path/to/your/assets',
    'js_file' => 'main.js',
]);

$loader->set_param('api_url', 'https://your-api-url.com');
$loader->set_param('container_id', 'myApp');
$loader->set_param('container_class', 'myClass');
$loader->set_param('include_admin_ajax_url', false);
$loader->set_param('localization_variable', 'myData');

echo $loader->load_resource();

这将从指定的JavaScript文件将React应用程序加载到ID为'myApp'和类为'myClass'的HTML容器中，并将指定的数据传递给名为'myData'的全局JavaScript变量。admin-ajax.php URL将不会包含在数据中。

方法链式调用

set_param方法返回UI对象，支持方法链式调用。以下是一个从UI类使用set_param方法的示例

$loader = new \GeekyCodeLab\WpReactLoader\UI([
    'assets_url' => 'path/to/your/assets',
    'js_file' => 'main.js',
]);

$loader->set_param('api_url', 'https://your-api-url.com')
       ->set_param('container_id', 'myApp')
       ->set_param('container_class', 'myClass')
       ->set_param('include_admin_ajax_url', false)
       ->set_param('localization_variable', 'myData');

echo $loader->load_resource();

在这个示例中，每次对set_param的调用都会返回UI对象本身，允许在同一行上再次调用set_param。这种方法比每行调用一个更简洁，通常也更易于阅读。最后对load_resource的调用是在新的一行进行的，因为它不返回UI对象，因此不能链式调用。

此说明应有助于用户理解他们如何使用方法链式调用使他们的代码更简洁、更易于阅读。