Reactjs Gutenberg RichText自定义块属性&引用；阵列&；“儿童”；或；弦乐；HTML"；？

我正在尝试使用“RichText”创建动态自定义块，并想知道如何设置它的属性。 通过检查互联网上的示例，有些人将其属性设置为“Array&Children”，但我也发现了带有“HTML&Class Name”的示例

我尝试了两种模式（下面的模式A和B），但它们在前端的结果完全相同。 我想知道它们之间的区别以及哪种方法更好

模式A

attributes: {
    message: {
        type: 'array',
        source: 'children',
        selector: '.message',
    }
},

模式B

attributes: {
    message: {
        type: 'string',
        source: 'html',
        selector: '.message',
    }
},

编辑和保存功能

edit: props => {
    const {attributes:{message}, className, setAttributes} = props;
    const onChangeMessage = message => {
        setAttributes({message});
    }
    return(
        <div className={ className }>
            <RichText
                tagName = "div"
                multiline = "p"
                onChange = {onChangeMessage}
                value = {message}
            />
        </div>
    );
},
save: props => {
    const {attributes:{message}} = props;
    return (
        <div>
            <div class="message">
                <RichText.Content
                    value = {message}
                />
            </div>
        </div>
    );

},

edit:props=>{
const{attributes:{message}，className，setAttributes}=props；
const onChangeMessage=message=>{
setAttributes（{message}）；
}
返回(
);
},
保存：道具=>{
常量{属性：{message}}=props；
返回(
);
},

属性源用于定义如何从保存的帖子内容中提取块属性值。它们提供了一种从保存的标记映射到块的JavaScript表示的机制

Gutenberg使用属性和属性源解析HTML并从中提取数据。为了做到这一点，古腾堡利用了，这是一个帮助器，可以精确地进行这种解析。每个源属性描述一个不同于hpq的函数，用于解析HTML块

这些属性被传递到“保存和编辑”功能

属性源取决于您的用例：

html:html源将从标记返回innerHTML

子节点：使用children源属性将DOM节点作为子节点数组返回

children属性更灵活，可以从块中提取复杂的HTML并对其进行编辑，大多数情况下，这是必须的 使用。

---

你可以看看另一个，也可以参考这个，我仍然不知道什么时候使用类型数组和类型stringwith children属性使用类型数组