0

我正在尝试使用 ReactJS 为 Gutenberg 创建自定义块。我正在尝试通过 render() 函数呈现 HTML,但出现“Uncaught SyntaxError: Unexpected token <”错误。

现在,我已经读到我应该确保将脚本类型定义为text/babel以正确呈现 HTML,但是当我通过wp_register_script() wordpress 函数添加我的 JS 文件时,我必须知道如何要做到这一点。

如果您需要更多详细信息,请告诉我,谢谢!

4

2 回答 2

0

首先将您的脚本排入 funcio.php 文件:

function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step01',
        get_theme_file_uri( '/js/test.js' ),
        array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' )
    );

    register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01', array(
        'editor_script' => 'gutenberg-boilerplate-es5-step01',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );

把你的代码 test.js :

例如 :

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };

registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-01', {
    title: 'Hello World (Step 1)',

    icon: 'universal-access-alt',

    category: 'layout',

    edit: function() {
        return el( 'p', { style: blockStyle }, 'Hello editor.' );
    },

    save: function() {
        return el( 'p', { style: blockStyle }, 'Hello saved content.' );
    },
} );

学习古腾堡,现在点击这个网址:

https://wordpress.org/gutenberg/handbook/

于 2018-11-27T10:56:26.453 回答
0

看起来您正在尝试直接渲染反应元素。

const element = <h1>Hello JSX</h1>;

这应该编译成:

var element = React.createElement(
  "h1",
  null,
  "Hello JSX"
);
于 2019-01-28T23:23:03.073 回答