Gutenberg Block：对象作为Reaction子级无效(找到：[Object HTMLDivElement])

时间：2020-04-15 作者：Marc

我正在尝试从我的一个函数“编辑并保存”中添加一些html。如果我手动操作，它会工作：

return <p>Hello World</p>;
但如果使用返回dom元素的函数执行此操作，则会出现以下错误：

古腾堡块：对象作为React子对象无效（找到：[对象HTMLIDEVELENT]）。

但如果我做控制台。信息浏览器显示html。你知道为什么这样不行吗？

registerBlockType( \'simpletoc/toc\', {
    title: __( \'SimpleTOC\', \'simpletoc\' ),
    icon: listul,
    category: \'layout\',
    edit: function( props ) {
            const data = wp.data.select( \'core/block-editor\' );
            const blocks = data.getBlocks();
            console.info(generateTOC(blocks));
      return generateTOC(blocks);
    },
    save: ( props ) => {
          return generateTOC(blocks);
    },
} );

function generateTOC(blocks){
    var div = document.createElement(\'div\');
    var ul = document.createElement(\'ul\');
    var h2 = document.createElement(\'h2\');
    var headline = __( \'Table of Contents\', \'simpletoc\' );
  h2.appendChild(document.createTextNode(headline));

    blocks.forEach(function (item,index){
        var blockId = \'\';
        var slug = \'\';

        h2 = document.createTextNode(headline)
        var title = \'\';
        if ( item[\'name\'] === \'core/heading\' ) {
            blockId = (item[\'clientId\']);
            title = item.attributes.content;
            slug = item.attributes.content.toSlug();
            var li = document.createElement(\'li\');
            li.appendChild(document.createTextNode(title));
            ul.appendChild(li);
        }
    });

    div.appendChild(h2);
    div.appendChild(ul);

    return div;
}

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

与其使用原始DOM节点，不如使用WP元素包装器组件并使用wp scripts

例如，下面是一个使用现代JS的ESNext块：

    edit() {
        return (
            <div style={ blockStyle }>
                Hello World, step 1 (from the editor).
            </div>
        );
    },
再次使用未经构建步骤的原始JS：

( function( blocks, i18n, element ) {
    var el = element.createElement;
....
        edit: function() {
            return el(
                \'p\',
                { style: blockStyle },
                \'Hello World, step 1 (from the editor).\'
            );
        },
...
} )( window.wp.blocks, window.wp.i18n, window.wp.element );
下面是使用现代JS时编辑功能的样子：

    edit: function( props ) {
        const data = wp.data.select( \'core/block-editor\' );
        const blocks = data.getBlocks();
        setHeadingAnchors(blocks);
        const headings = blocks.map( ( item, index ) => {
            if ( item.name === \'core/heading\' ) {
                return null;
            }
            return <li>{item.attributes.content}</li>;
        } );
        return <div>
            <h2>{ __( \'Table of Contents\', \'simpletoc\' ) }</h2>
            <ul>
                {headings}
            </ul>
        </div>;
    },
然后我们可以使用wp scripts 要构建它：

https://github.com/WordPress/gutenberg-examples/blob/master/01-basic-esnext/package.json#L19-L22

因此，它将构建脚本并处理所有JSX，并确保它使用WordPress元素包装器（否则必须使用el( \'p\' 等等，它甚至会给你PHP file that returns an array of JS dependencies 对于wp_enqueue_script 这样，您构建的JS将保持超级精简，并在编辑器中的正确时间加载

旁注：

  • item[\'name\'] 会给你带来麻烦，item 是对象，不是数组缩进！正确且一致地缩进看起来您有一个函数setHeadingAnchors 这会干涉其他块的事务，我建议不要这样做，你也应该在save函数中使用这段代码，你的PHP唯一需要做的就是让JS排队，并确保加载前端所需的任何资产

标签： plugins   block-editor   小码农  

相关推荐

Testing Plugins for Multisite

我最近发布了一个WordPress插件，它在单个站点上非常有效。我被告知该插件在多站点安装上不能正常工作，我理解其中的一些原因。我已经更新了代码，现在需要一种方法来测试更新后的代码，然后才能转到实时客户的多站点安装。我有一个用于测试的WordPress安装程序的单站点安装，但需要在多站点安装上进行测试。根据我所能找到的唯一方法是在网络上至少有两个站点来安装整个多站点安装，以测试我的插件。设置WordPress的整个多站点安装是插件开发人员的唯一/首选方式，还是有更快的测试环境可用。