我终于让ServerSideRender开始工作了。但是,在保存帖子时,如何重新加载ServerSideRender?
save: props => {
return null;
},
我想这里我需要一个触发器之类的东西来再次从插件加载数据。有人能告诉我去哪里找吗?serversiderender列出了标题结构,并需要在更新帖子时显示新数据。这是整个索引。块的js。
const { __, setLocaleData } = wp.i18n;
const { registerBlockType } = wp.blocks;
const listul = wp.element.createElement(\'svg\',
{
width: 20,
height: 20
},
wp.element.createElement( \'path\',
{
d: "M5.5 7C4.67 7 4 6.33 4 5.5 4 4.68 4.67 4 5.5 4 6.32 4 7 4.68 7 5.5 7 6.33 6.32 7 5.5 7zM8 5h9v1H8V5zm-2.5 7c-.83 0-1.5-.67-1.5-1.5C4 9.68 4.67 9 5.5 9c.82 0 1.5.68 1.5 1.5 0 .83-.68 1.5-1.5 1.5zM8 10h9v1H8v-1zm-2.5 7c-.83 0-1.5-.67-1.5-1.5 0-.82.67-1.5 1.5-1.5.82 0 1.5.68 1.5 1.5 0 .83-.68 1.5-1.5 1.5zM8 15h9v1H8v-1z"
}
)
);
import ServerSideRender from \'@wordpress/server-side-render\';
registerBlockType( \'simpletoc/toc\', {
title: __( \'SimpleTOC\', \'simpletoc\' ),
icon: listul,
category: \'layout\',
edit: function( props ) {
return (
<p className={ props.className }>
<ServerSideRender
block="simpletoc/toc"
attributes={ props.attributes }
/>
</p>
);
},
save: props => {
return null;
},
} );
最合适的回答,由SO网友:Marc 整理而成
我用块中的“更新”按钮解决了这个问题。这有点奇怪,因为我需要发送“假”属性来重新渲染它。但这是可行的。
var el = wp.element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var BlockControls = wp.blockEditor.BlockControls;
var ServerSideRender = wp.serverSideRender;
var Toolbar = wp.components.Toolbar;
var IconButton = wp.components.Button;
function sendfakeAttribute(props) {
// this actually triggers the ServerSideRender again ¯\\_(ツ)_/¯
props.setAttributes({ updated: Date.now() });
}
registerBlockType( \'simpletoc/toc\', {
title: __( \'SimpleTOC\', \'simpletoc\' ),
icon: listul,
category: \'layout\',
edit: function( props ) {
return [
el(
BlockControls,
{ key: \'controls\' },
el(
Toolbar,
null,
el(
IconButton,
{
className: \'components-icon-button components-toolbar__control\',
label: \'update\',
onClick: function() { sendfakeAttribute(props) },
icon: \'update\'
}
)
)
),
el(
ServerSideRender,
{
block: props.name,
attributes: props.attributes
}
)
];
},
save: props => {
return null;
},
} );