Wordpress Gutenberg - 嵌套子元素答案

【问题标题】：Wordpress Gutenberg - nesting child elementsWordpress Gutenberg - 嵌套子元素
【发布时间】：2019-10-20 08:52:09
【问题描述】：

我是 reactjs 的新手，所以我在尝试向古腾堡编辑器添加自定义块时有些吃力。块本身正在显示，但给出错误“此块遇到错误，无法预览”。

这是我目前得到的代码

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>

我做错了什么？

提前致谢

【问题讨论】：

标签： wordpress-gutenberg

【解决方案1】：

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

应该是：

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

【讨论】：

谢谢。这段代码仍然对我不起作用。仍然显示相同的错误
我进行了编辑，使其符合您定义 createElement 的方式并删除了不正确的大括号位置。

【解决方案2】：

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

我已经修复了一些代码问题并删除了您的 blockStyle。你需要确保你已经定义了这个变量。

【讨论】：