Reactjs 古腾堡内部积木传递道具或获取信息

我刚刚进入古腾堡，尤其是内街区。我试图实现的是父模块和内部模块之间的一种沟通形式。例如，我想显示在父块中创建了多少个内部块

//registering Blocks
registerBlockType( 'xxx/outer-block', {
    ...
} );

registerBlockType( 'xxx/inner-block', {
    ...
    parent: [ 'xxx/outer-block' ],
    ...
} );

从外部块的编辑功能

edit: ( { attributes, setAttributes, className, isSelected } ) => {

  return (
    <div className={ className }>
      <p>There are { innerBlockCount } innerBlocks</p>
      <p>One of the inner blocks is selected: { isInnerBlockSelected }</p>
      <InnerBlocks />
    </div>
  );

---

但是当选择了一个内部块时，我很难通知外部块。我的目标是为我的块创建一个类似“编辑模式”的东西，当块或其中一个子块处于活动状态时，它会自动启用。

很高兴知道您已经尝试并解决了一些问题

正如您所知，Gutenberg是一个基于React的编辑器，在React组件上，应用程序处理/使用数据时会出现一些状态，因此逻辑上Gutenberg也应该将这些数据存储在某个位置，我很高兴告诉您，它不仅存储数据，还提供getter和setter。古腾堡将这些数据存储在您已经使用的数据模块中，这是它的

正如我想象的那样，您已经研究了其中的一些内容，并发现它不是非常友好的开发人员文档，但是有一种友好而快速的方法可以访问所有功能并进行测试

对于每个数据模块，您可以在浏览器控制台中看到所有可用的getter和setter，还可以从控制台测试它们。在使用控制台时，只有一个条件是您必须在Gutenberg编辑器屏幕中

在控制台上，编写以下select方法以获取getter，dispatch方法以获取setter

• wp.data.选择（'core'）

• wp.data.dispatch（'core'）

• wp.data.选择（'core/blocks'）

• wp.data.dispatch（'core/blocks'）

• wp.data.选择（'core/block editor'）

• wp.data.dispatch（'core/block editor'）

---

而且，我认为你会有更多的想法，进入参考页面，将该模块传递给

wp.data.select（）

或

wp.data.dispatch（）

，然后你就可以获取或设置数据了。我希望它能帮助您解决所有当前的问题，也可能有助于解决未来的问题。

您能举一个设置数据的例子吗？例如，块的属性@garmoncheg我已经编辑了我的答案，所以请再复习一遍。可以使用以下命令更新属性。因此，在第一个命令中，我使用selectedBlock获取blockId，它被称为

clientId

，在更新方法中需要，但您可以使用

wp.data.select（'core/block editor'）

中的任何方法，在第二个命令中，我使用该clientId更新属性

let clientId=wp.data.select（'core/block editor'）。getSelectedBlock（）.clientId

then

wp.data.dispatch（'core/editor'）。updateBlockAttributes（[clientId]，{content:'content to update'}）

export default compose( [
    withSelect( ( select, ownProps ) => {
        const blocks = select( 'core/editor' ).getBlocksByClientId( ownProps.clientId );
        const innerBlocks = blocks.length ? blocks[ 0 ].innerBlocks : [];
        return {
            innerBlocks: innerBlocks,
            innerBlocks: select( 'core/editor' ).getBlocks( ownProps.clientId ),
            innerBlocksCount: innerBlocks.length,
        };
    } ),
    withNotices,
] )( OuterBlock );