正在尝试创建一个插入react应用程序的快捷代码

Question

我需要在wordpress网站内集成一个react应用程序。我创建了一个自定义插件和一个快捷代码，但快捷代码呈现了一个空的div。这是我的第一个wordpress插件，所以我可能缺少一些东西。

我的插件目录如下：

/public_html/wp-content/plugins/PatSearch
- PatSearch.php
/public_html/wp-content/plugins/PatSearch/includes
- enqueue.php
- shortcode.php
/public_html/wp-content/plugins/PatSearch/widget
- Contains the root of the react application. It has been build and works when I visit the build directory

PatSearch.php

<?php
/**
* @wordpress-plugin
* Plugin Name:       Ajout d'un app React pour la recherche
*/
defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );
define( 'PAT_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' );
define( 'PAT_ASSET_MANIFEST', PAT_WIDGET_PATH . '/build/asset-manifest.json' );
define( 'PAT_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );
require_once( PAT_INCLUDES . '/enqueue.php' );
require_once( PAT_INCLUDES . '/shortcode.php' );

enqueue.php

<?php
// This file enqueues scripts and styles
defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );
add_action( 'init', function() {
add_filter( 'script_loader_tag', function( $tag, $handle ) {
if ( ! preg_match( '/^pat-/', $handle ) ) { return $tag; }
return str_replace( ' src', ' async defer src', $tag );
}, 10, 2 );
add_action( 'wp_enqueue_scripts', function() {
$asset_manifest = json_decode( file_get_contents( PAT_ASSET_MANIFEST ), true )['files'];
if ( isset( $asset_manifest[ 'main.css' ] ) ) {
wp_enqueue_style( 'pat', get_site_url() . $asset_manifest[ 'main.css' ] );
}
wp_enqueue_script( 'pat-runtime', get_site_url() . $asset_manifest[ 'runtime~main.js' ], array(), null, true );
wp_enqueue_script( 'pat-main', get_site_url() . $asset_manifest[ 'main.js' ], array('pat-runtime'), null, true );
foreach ( $asset_manifest as $key => $value ) {
if ( preg_match( '@static/js/(.*).chunk.js@', $key, $matches ) ) {
if ( $matches && is_array( $matches ) && count( $matches ) === 2 ) {
$name = "pat-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );
wp_enqueue_script( $name, get_site_url() . $value, array( 'pat-main' ), null, true );
}
}
if ( preg_match( '@static/css/(.*).chunk.css@', $key, $matches ) ) {
if ( $matches && is_array( $matches ) && count( $matches ) == 2 ) {
$name = "pat-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );
wp_enqueue_style( $name, get_site_url() . $value, array( 'pat' ), null );
}
}
}
});
});

shortcode.php

<?php
// This file enqueues a shortcode.
defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );
add_shortcode( 'pat_widget', function( $atts ) {
$default_atts = array();
$args = shortcode_atts( $default_atts, $atts );
return "<div id='pat-root'></div>";
});

我创建了一个页面并添加了快捷代码[pat_widget]保存了它并访问了该页面，但位于/wp-content/plugins/PatSearch/widget/build/的react应用程序并没有像我想象的那样嵌入。。。当我查看页面的源代码时，我只能看到一个空的<div id='pat-root'></div>

Answer 1

我发现了问题所在。文字压制方面的工作很好。。。我不得不修改构建中生成的React index.js文件。

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
// Commented this line
// ReactDOM.render(<App />, document.getElementById("root"));
// Added this to match my shortcode requirements
const target = document.getElementById('pat-root');
if (target) { ReactDOM.render(<App />, target); }