我正在尝试组合一个自定义块，以生成来自第三方的嵌入。嵌入是通过外部脚本扫描包含唯一标识符的数据属性的元素生成的。我有这个区块的基本版本工作得很好。但是，我现在正在尝试在您输入标识符时在编辑屏幕中动态显示此嵌入。
我的编辑功能如下所示：
function Edit( { attributes, setAttributes } ) {
const onChangeIdentifier = (value) => {
setAttributes({ identifier: value });
};
return (
<div id = {`embed-${ instanceId }`}>
{attributes.identifier
?
<div
data-identifier= { attributes.identifier }
>
</div>
:
<Placeholder
instructions={ __( \'Enter identifier.\' ) }
>
<PlainText
placeholder={ __(
\'Enter identifier here…\'
) }
value={ attributes.identifier || \'\' }
onChange={ onChangeIdentifier }
/>
</Placeholder>
}
</div>);
}
export default withInstanceId( Edit );
几乎每件事都发生得很正确。当输入标识符时，它会交换数据标识符元素的占位符，但无法生成嵌入，因为第三方脚本仅在加载DOM时自动触发扫描。它们确实提供了一个函数，可以在您通过ajax创建嵌入时手动调用扫描。
Here is the issue: 我不知道在哪里调用此函数以使其正确呈现嵌入。（我可以验证它是否正常工作，因为我可以编辑块并在控制台中调用该函数，并使其正确更新。）
最合适的回答,由SO网友:Welcher 整理而成
你可以试试useEffect 挂钩已订阅attributes.identifier 调用脚本。
类似于：
function Edit( { attributes, setAttributes } ) {
useEffect( () => {
// this will fire whenever the attribute changes.
thirdPartyScriptFunctionName();
},[attributes.identifier])
const onChangeIdentifier = (value) => {
setAttributes({ identifier: value });
};
return (
<div id = {`embed-${ instanceId }`}>
{attributes.identifier
?
<div
data-identifier= { attributes.identifier }
>
</div>
:
<Placeholder
instructions={ __( \'Enter identifier.\' ) }
>
<PlainText
placeholder={ __(
\'Enter identifier here…\'
) }
value={ attributes.identifier || \'\' }
onChange={ onChangeIdentifier }
/>
</Placeholder>
}
</div>);
}
export default withInstanceId( Edit );
你需要得到
useEffect 从wp上钩住。元素全局。
希望这有帮助！
