Question

是否可以使Gutenberg组件重新渲染而不必调用props.setAttributes()？

当显示我的Gutenberg块时，我正在执行AJAX请求以查看是否有新数据可用并显示“正在加载...”文本。如果没有可用数据，我只想删除“正在加载...”文本。但是，如何在不先致电props.setAttributes()的情况下做到这一点？

Answer 1

古腾堡的块实际上是React组件，在React中有两种触发渲染的主要方法，一种是更改props，另一种是更改state。

在古腾堡，props与attributes等效，但状态为状态。因此，您可以在isLoading上添加attributes属性，其默认值为true，并且当收到ajax响应时，可以将其切换为false。

从技术上讲，isLoading不是您的block属性的一部分，所以我建议您选择state。请注意，您只能在React的类组件中定义状态，或通过在功能组件中使用钩子（在React v16及更高版本上）来定义状态。

Answer 2

我以 Mehmood Ahmad 的回答为指导，决定扩展这个状态的想法。所以使用刷新块的问题 props.setAttributes({something: Date.now()}); 是这个属性将永久存在。如果您切换到代码编辑器视图，您可以检查它是否污染了您的真实属性，它将在该 HTML 注释中。

因此，您在 wp.blocks.registerBlockType 的 edit 中使用的对象需要基于 wp.compose.withState 构建或组合。由于我还想使用另一个 HOC、wp.data.withSelect，所以我选择了 compose 方式。

window.wp.compose.compose(
    wp.data.withSelect( /* ... */ ),
    wp.compose.withState({something: ''})
)(function (props) {
 // Actually make use of props.something
});

然后在需要的地方，例如在点击处理程序中，您可以使用以下内容对其进行更新：

props.setState({something: Date.now()});

它将重新渲染块而不保留值。您必须使用 props.something 否则什么都不会发生。

重新渲染古腾堡块而不调用setAttributes？

2 个答案: