WordPress中React组件无法渲染求助：@wordpress/element与ReactDOM差异

• 生态适配不同：
  • react-dom是React官方核心库，负责在通用Web环境下将React组件渲染到DOM，无特定平台绑定。
  • @wordpress/element是WordPress官方封装的React工具集，基于React开发，专门适配WordPress生态，自动处理与WordPress内置脚本的依赖冲突、版本兼容问题，同时整合了WordPress的hooks规范。
• 渲染逻辑差异：
  • react-dom通过ReactDOM.render()直接操作DOM，需手动保证脚本执行时机与DOM容器的存在性。
  • @wordpress/element提供的render()方法，会自动适配WordPress的DOM加载顺序，避免因DOM未就绪导致的渲染失败。
• 依赖管理区别：
  • 使用react-dom时，Webpack会将React、ReactDOM打包进你的代码，容易和WordPress自带的React版本冲突。
  • 使用@wordpress/element时，WordPress会自动提供React依赖，无需重复打包，从根源避免版本冲突。

1. 核心问题梳理 #

• 你同时加载了两个独立的React bundle，且FlighContainerBundle.js尝试渲染到不存在的search-flights-container DOM节点，这是添加wp-element依赖后出现“Target container is not a DOM element.”的直接原因。
• 两个bundle各自打包React实例，导致hooks运行在不同React环境下，引发“Cannot read properties of null (reading 'useState')”错误；直接用react-dom时无报错，是因为脚本执行时机与DOM容器不匹配，组件静默渲染失败。

2. 分步修复方案 #

步骤1：合并渲染入口，移除重复bundle

你的index.js已包含路由与目标组件，无需单独的FlighContainerBundle.js。修改webpack.config.js：

const webpackConfig = {
    mode: 'development',
    entry: {
        bundle: path.join(__dirname, 'src', 'index.js')
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    // 保留其他原有配置
};

步骤2：配置WordPress脚本依赖

修改functions.php，让主bundle依赖wp-element，由WordPress提供React环境：

wp_enqueue_style('theme', get_stylesheet_directory_uri() . '/dist/css/style.bundle.css', array(), '1.0', true);
wp_enqueue_script('theme-bundle', get_stylesheet_directory_uri() . '/dist/js/bundle.js', array('wp-element'), '1.0', true);

步骤3：替换渲染方式，适配WordPress环境

修改index.js，使用@wordpress/element的render方法，并确保DOM就绪后执行渲染：

import HomePageFlightContainer from './HomePageFlightContainer';
import PageFetch from './PageFetch';
import { render } from '@wordpress/element';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
    return (
        <Router>                  
            <Switch>
                <Route path="/wordpress/search" component={PageFetch} />
                <Route path="/" component={HomePageFlightContainer} />
            </Switch>               
        </Router>
    );
};

// 确保DOM加载完成后再渲染
document.addEventListener('DOMContentLoaded', () => {
    const rootContainer = document.getElementById('root');
    if (rootContainer) {
        render(<App />, rootContainer);
    }
});

步骤4：Webpack优化，排除WordPress提供的依赖

添加externals配置，避免Webpack重复打包WordPress已提供的库：

// 在webpackConfig对象中添加
externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    '@wordpress/element': 'wp.element'
}

步骤5：若需单独渲染FlighContainer的补充处理

如果确实需要单独渲染该组件，先在index.php中添加对应DOM容器：

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- 添加目标容器 -->
    <div id="search-flights-container"></div>
    <?php wp_footer(); ?>
</body>

并将FlighContainer整合到路由或主组件中，避免多入口渲染导致的冲突。

3. 验证调试 #

• 清空浏览器缓存后刷新页面，检查控制台报错信息。
• 通过开发者工具“网络”面板，确认wp-element脚本已加载，且你的bundle.js在其之后执行。
• 可在渲染前添加console.log(document.getElementById('root'))，验证DOM容器是否存在。

内容的提问来源于stack exchange，提问作者user1207289