wordpress - WordPress Gutenberg RichText 不显示 HTML

Question

如下面的代码片段所示，我试图将 HTML 或 JSX 附加到 RichText 内容是徒劳的。

const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( /* ... */, {
    // ...

    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
            default: [],
        },
    },

    edit( { className, attributes, setAttributes } ) {

        const updateContentWithString = ( content ) => {

            setAttributes( { content: content.concat( 'test' ) } );

        }

        const updateContentWithHTML = ( content ) => {

            setAttributes( { content: content.concat( <Button isDefault >Test Button</Button> ) } );

        }

        return (
            <RichText
                tagName="p"
                className={ className }
                value={ attributes.content }
                onChange={ updateContentWithString } // updateContentWithString works fine BUT updateContentWithHTML doesn't work at all
            />
        );
    },

    save( { attributes } ) {
        return <RichText.Content tagName="p" value={ attributes.content } />;
    }
} );

我想知道为什么updateContentWithString()工作正常但updateContentWithHTML()根本不起作用。

请指导我。

谢谢

标签： wordpressreactjswordpress-gutenberg

Answer 1

尝试

setAttributes( { content: content.concat( '<Button isDefault >Test Button</Button> )' } );

在 JSX<Button/>中将被预处理/转换React.createElement以创建组件。

注意：在 JSX<Button/>中不同于<button/>(component vs. html)

更新：

以上仅与 react/JSX 有关。 我不知道或使用过古腾堡（还），但根据这个html 元素应该作为对象传递，而不是 html 源。可能您应该使用RichTextwp.element.createElement甚至定义/使用自己的自定义块类型。

在 Gutenberg 中搜索编辑/更新/创建 html（元素）的方法。