基于roots/sage在Wordpress项目中嵌入React组件答案

【问题标题】：Embedding react component in Wordpress project based on roots/sage基于roots/sage在Wordpress项目中嵌入React组件
【发布时间】：2020-06-30 08:03:42
【问题描述】：

所以我一直在尝试根据 root/sage 设置将 React 组件嵌入到现有的 wordpress 项目中。

一直在互联网上搜索有关如何执行此操作的指南，但我找不到任何方法。

当我阅读 wordpress 指南时，它看起来应该很简单，并且 react & react-dom 应该在 wp.element 中可用。 https://developer.wordpress.org/block-editor/packages/packages-element/

在 wp.element 全局对象上，您会发现以下内容，大致按照您在代码中遇到它的可能性排序：

<div id="greeting"></div>
<script>
function Greeting( props ) {
    return wp.element.createElement( 'span', null, 
        'Hello ' + props.toWhom + '!'
    );
}
 
wp.element.render(
    wp.element.createElement( Greeting, { toWhom: 'World' } ),
    document.getElementById( 'greeting' )
);
</script>

所以我一直在尝试从一个 React 组件开始打印一个基本的 hello world。但我没有比 wp.element 未定义更进一步。

我不知道如何让它工作。有人有这方面的经验吗？

【问题讨论】：

标签： reactjs wordpress roots-sage

【解决方案1】：

您需要将反应脚本排入队列，像这样

            wp_register_script(
                'react',
                get_template_directory_uri() . '/build/index.js',
                ['wp-element'],
                '0.01'
            );
            wp_enqueue_script('react');

然后在index.js 中，您将可以访问wp.element

【讨论】：