在不调用 setAttributes 的情况下重新渲染古腾堡块？

Question

是否可以让 Gutenberg 组件重新渲染而无需调用 props.setAttributes()？

当我的 Gutenberg 块显示时，我正在执行 AJAX 请求以查看是否有可用的新数据并显示 "Loading..." 文本。如果没有可用数据，我只想删除 "Loading..." 文本。但是如果不先调用 props.setAttributes() 怎么办呢？

Answer 1

Gutenberg的block其实就是React Components，在React中触发渲染主要有两种方式，一种是改props，一种是改state.

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

从技术上讲，isLoading 不是您的块属性的一部分，因此我建议您更喜欢 state。请注意，您只能在 React 的 Class 组件中定义状态，或者在功能组件中使用钩子（在 React v16 及更高版本上）。

Answer 2

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

因此，您在 wp.blocks.registerBlockType 的 edit 中使用的对象需要构建在 wp.compose.withState 之上或由 wp.compose.withState 组成。因为我也想用另一种HOC, wp.data.withSelect, I chose the 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 的情况下重新渲染古腾堡块？

Re-render Gutenberg block without calling setAttributes?

wordpress

wordpress-gutenberg

gutenberg-blocks