Question

我是Reactjs的新手，因此我在尝试向gutenberg编辑器中添加自定义块时遇到了一些麻烦。该块本身正在显示，但显示错误“此块遇到错误，无法预览”。

这是到目前为止我得到的代码

edit: function() {
        var tb = element.createElement('input', { placeholder: 'Enter a url', type: 'text' },
            [element.createElement(
                'p',
                { style: blockStyle },
                'Child 1'
            )]
        );
        return tb;

    },

我正在尝试使文本控件和标签显示为

<input type='text' name='mytb' />
<label for="mytb">My Label</label>

我在做什么错了？

预先感谢

Answer 1

在您的代码中，您已将段落元素作为输入的后代，这是不可能的，因此会出现错误。

应该是：

 var tb = element.createElement('input', { placeholder: 'Enter a url', type: 'text' }),
          element.createElement( 'p', { style: blockStyle }, Child 1');
return tb;

Answer 2

var tb = [element.createElement( 'input', { placeholder: 'Enter a url', type: 'text' } ),
         element.createElement( 'p', {}, 'Child 1' )];
return tb;

我已经解决了一些代码问题，并删除了您的blockStyle。您需要确保已定义此变量。

Wordpress Gutenberg-嵌套子元素

2 个答案: