我有一些定制积木。每个都有一个保存函数，用于从块的属性中获取内容：

( { className, attributes } ) => (
    <div className = { className }>{ attributes.content }</div>
)

以下是content属性的配置：

attributes: {
    content: {
        source: "html",
        type: "string",
        selector: "div"
    }
}

内容是一个对象，即React组件。内容在块编辑器中按预期呈现。当我预览文章时，它会在前端按预期呈现，发布后查看时也是如此。

但当我去编辑保存的帖子时，块验证失败。错误消息显示；“保存”功能生成的内容；逃脱< 在属性的HTML内容中，而；从帖子正文检索的内容“；没有。

假设检索到的内容如下：

<div class="wp-block-example-class"><p>Example paragraph</p></div>

那么保存的内容是：

<div class="wp-block-example-class">&lt;p>Example paragraph&lt;/p></div>

我找到了这个support post 关于使用RawHTML. 因此，我尝试更改保存功能：

( { className, attributes } ) => (
    <div className = { className }>
        <RawHTML>{ renderToString( attributes.content) }</RawHTML>
    </div>
)

我得到了上述相同的结果。注意，我第一次尝试使用RawHTML 没有renderToString—也就是说，<RawHTML>{ attributes.content }</RawHTML>. 在编辑器中按预期呈现的内容，但不在前端，其中块div 包装器包含文本；“未定义”；和；空（&Q）；从React组件派生的元素应该在哪里。

如果有必要，可以通过编程方式创建和插入块。简化后，流程如下：

const myContent = ( <MyComponent>{"Some content"}</MyComponent> );
const myBlock   = createBlock( "example/my-block", {  
    content: myContent 
} );

dispatch( "core/block-editor" ).insertBlock( myBlock );

我可以尝试阻止什么< 不被块的save函数转义？

// Create the content and the block
const myContent = ( <MyComponent>{"Some content"}</MyComponent> );
const myBlock   = createBlock( "example/my-block", {  
    content: renderToString( myContent )
} );

( { className, attributes } ) => (
    <RichText.Content 
        tagName   = \'div\'
        className = { className }
        value     = { attributes.content }
    />
)