改为显示HTML代码，而不是用JavaScript显示古腾堡块

Question

我使用下面给出的代码创建了一个Gutenberg块。我还使用register_rest_field（）函数创建了一个rest API调用。其余的API将返回HTML代码，并且可以在JavaScript代码中使用。但是JS显示的是HTML代码，而不是阅读器。

这是PHP代码：

<?php /* PHP Code */
    register_block_type( 'myplugin/myelement', array(
        'attributes' => array(
            'heading' => array(
                'type' => 'string',
                'default' => ''
            ),
            'subheading' => array(
                'type' => 'string',
                'default' => ''
            ),
        ),
        'render_callback' => 'myplugin_render_myelement',
    ) );

    }
    add_action( 'init', 'myplugin_init_myelement' );


    /**
    * Create API fields for additional info
    */
function myplugin_myelement_backend_view_rest_api() {

    register_rest_field(
        'post',
        'myplugin_myelement_style_preview',
        array(
            'get_callback' => 'myplugin_myelement_backend_view',
            'update_callback' => null,
            'schema' => null,
        )
    );


}
add_action( 'rest_api_init', 'myplugin_myelement_backend_view_rest_api' );


function myplugin_myelement_backend_view( $object, $field_name, $request ) {
    $return = '';
    return '<div class="testing_class">This is <strong>with HTML</strong> tags</div>';
}

这是JS代码：

/* JavaScript Code */
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks

const {
    RichText,
    InspectorControls,
    PanelColorSettings,
    BlockControls,
    AlignmentToolbar,
    MediaUpload,
} = wp.editor;


//  Import JS .
import { myplugin } from '../global';
import { PostsGridIcon } from '../icons';

const { 
    SelectControl,
    TextControl,
    RangeControl,
    PanelBody,
} = wp.components;

const { withSelect } = wp.data;


registerBlockType( 'myplugin/myelement', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'MyPlugin MyElement' ), // Block title.
    icon: 'format-aside', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'MyPlugin MyElement' ),
        __( 'post' ),
        __( 'latest recent' ),
    ],
    attributes: {
        heading: {
            type: 'string',
            default: '',
        },
        subheading: {
            type: 'string',
            default: '',
        }

    },


    edit: withSelect( ( select, props ) => {
        const getEntityRecords = select( 'core' ).getEntityRecords;
        const { 
            attributes,
        } = props;

    } )( ( props ) => {
        const {
            isSelected,
            posts,
            categoriesList,
            setAttributes,
        } = props;

        const {
            heading,
            subheading,
        } = props.attributes;

        if( ! posts ){
            return "loading !";
        }

        if ( posts.length === 0 ) {
            return "No posts";
        }

        // prepare Posts Output
        const output = posts.map( function( post ){

                const htmlcode = post.myplugin_myelement_style_preview;
                console.log(htmlcode); /*  This is with HTML */
                return (

                    <div className={ 'myplugin-myelement-wrapper' }>
                        {htmlcode}
                    </div>

                )


        });


        return [

            isSelected && (

                <InspectorControls key = {'inspector'} > 

                    <PanelBody
                        title={ __('Headings') }
                        initialOpen={true}
                    >

                        <TextControl
                            label = { __('Heading') }
                            value = { heading }
                            onChange = { ( newVal ) => setAttributes( { heading: newVal } ) }
                        />
                        <TextControl
                            label = { __('Sub-Heading') }
                            value = { subheading }
                            onChange = { ( newVal ) => setAttributes( { subheading: newVal } ) }
                        />

                    </PanelBody>



                </InspectorControls>

            ),

            <div className = { 'myplugin-block myplugin-posts-grid _' + columns + '_columns_myplugin' }>
                { output }
            </div>

        ];

    } ),

    save: () => null,
} );

因此，基本上，“ htmlcode”常量包含HTML代码，但是React JS正在对其进行编码，并直接显示HTML代码而不是显示HTML格式的内容。那么我该如何解决呢？

更新：console.log输出为：

<div class="testing_class">TTTTTTTTTTTTTTTTTTTTTT POST BOX YYYYYYYYYYYYY</div>

这是编辑页面上的输出：