简单地说,您的块行为不正常。
给定一组参数,块应始终提供相同的结果。编辑器将此用作检查,如果结果不匹配,则说明有问题,blocks实现存在错误。
在块的情况下,这是因为在生成标记时,每次都从零开始提取数据。因此,如果我通过a、B和C,我可能得到D,或者可能得到E,因为save
函数依赖于外部API调用,不再安全包含。您没有使用道具/属性来生成输出,而是使用了其他一些东西。这太糟糕了!
因此,当您确定TOC应该是什么时,请将其存储在属性中。您需要声明该属性存在,并使用它提供的setter。
这给我们带来了一个新问题:
function buildTOC(props){
const data = wp.data.select( \'core/block-editor\' );
const blocks = data.getBlocks();
const headings = blocks.map( ( item, index ) => {
if ( item.name === \'core/heading\' ) {
var slug = \'\';
var hashslug = \'\';
var blockId = ( item.clientId );
slug = item.attributes.content;
hashslug = \'#\' + slug;
return <li><a href={hashslug}>{item.attributes.content}</a></li>;
}
} );
确定文档中的标题的功能与构建最终组件的功能相同。该函数做得太多,没有使用依赖项注入,因此,没有分离关注点。这需要重构为2个功能,我还建议用类似的组件替换您的功能:
edit: function ( props ) {
const headings = find_headings( props );
props.setAttributes( { headings: headings } );
return <toc {...props} />;
},
save: function ( props ) {
return <Toc {...props} />;
},
哪里
<Toc>
是这样的:
function Toc( props ) {
return ....
}