我如何监听InnerBlock子级中的更改?

时间:2022-01-26 作者:verism

我创建了一个自定义块,它使用WordPress核心块作为innerBlock子块;更具体地说,是核心/嵌入块。我想做的是监听子块属性中的更改,以便在父块中响应它们。

自定义块编辑函数返回以下内容:

return (
    <div { ...useBlockProps() } onChange={parentUpdate}>
        <InnerBlocks
            allowedBlocks={[\'core/embed\']}
            template={EMBED_TEMPLATE}
            templateLock="all"
        ></InnerBlocks>
    </div>
);
以及parentUpdate 函数当前看起来像:

const parentUpdate = () => {
    const thisBlock = select(\'core/editor\').getBlocksByClientId(clientId)[0]
    const childBlock = thisBlock.innerBlocks[0]
    const videoURL = childBlock.attributes?.url
    console.log(videoURL)
}
TheparentUpdate 每当子嵌入块中的url属性更改时,函数都会激发,但(也许并不奇怪)它会在子事件块更新之前激发,这意味着我会在更改之前而不是之后获得值。

我应该如何处理这个问题,以便在子块更新后使用子属性?

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

您不会这样做,这样做的需要通常是一种代码气味和警告标志,表明您做错了什么,或者正试图对抗react和块以某种方式工作的方式。

然而,如果你想继续沿着错误的方向走下去,你可以依靠useSelect 要获取所需信息,请直接访问select 不是很好,这也意味着您不再需要对组件进行更改。

但正如我所说的,正如你的评论所揭示的,这是一个需要解决的大问题,想要在块中显示嵌入,导致将嵌入块作为子块放在内部块中,迫使你将其作为一个黑客来实现,以获取所需信息,这是一个X Y问题。Don\'t do that.

积木不应该依赖于像这样的其他积木,它们需要像实际的乐高积木一样可组合。如果两块砖被设计为一起工作,例如列和列块,这是可以的,但将块重新用于编辑器UI目的不是一个好主意。

相反,请阅读core/embed 阻止位置:

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/embed/edit.js

它显示:

如何获取预览代码并将其呈现,当它获取视频链接的嵌入代码时,如何处理加载微调器,URL将成为块上的另一个支柱。

如果任务的目标是为嵌入提供修改后的UI,则甚至可以通过过滤器使用其他属性和组件来调整嵌入块本身,以对其进行扩展。然而,关于您的工作打算实现什么的细节很少。

相关推荐