reactjs - 古腾堡 RichText 自定义 block 属性。 "Array & Children"还是 "String & HTML"？

Question

我正在尝试使用“RichText”制作动态自定义 block ，并想知道如何设置它的属性。 通过查看网上的示例，有人将其属性设置为“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>
    );

},

Answer 1

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

古腾堡使用属性和属性源来解析 HTML 并从中提取数据。为了做到这一点，古腾堡利用 hpq library ，它是一个专门执行这种解析的助手。每个源属性都描述了 hpq 中用于解析 HTML block 的不同函数。

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

属性来源取决于您的用例:

html: html 源将从标记返回innerHTML。

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

A children attribute is more flexible to extract complex HTML from your block and edit them and most of the time this what you must be using.

你可以看看其他list of attributes provided by RichText here并真正引用这个indepth blog on Attributes