Question

仅当您在父块内部时，父块的props.isSelected才为true，而在该块的innerBlocks内部进行编辑时，则为真。

如何从父块检查用户是否正在编辑该父块的内部块（无论深度如何）

我问是因为我想对父级的innerBlocks进行某种切换功能，直到选择父级Block并尝试使用props.isSelected才能看到，但是显然当您开始编辑内部块，它会立即消失，因为不再选择父对象

这是一个简单的代码，应该演示我在说什么

registerBlockType('test/parent', {
    name: 'Parent',
    edit: (props) => {
      const template = [['test/child'],['test/child']];
      if (props.isSelected) {
        return <InnerBlocks template={template}/>;
      }
      return <div>Click me to see my inner block</div>;
    },
    save: (props) => {
        return <InnerBlocks.Content />;
    }
};
registerBlockType('test/child', {
    name: 'Child',
    parent: ['test/parent'],
    edit: (props) => {
      return <div>I'm the child I can have some more nested blocks but if you click on me I will be gone because my parent won't want me anymore, I wish somebody could edit me :(</div><InnerBlocks />;
    },
    save: (props) => {
        return <div>I'm the child</div><InnerBlocks.content />;
    }
}

Answer 1

经过大量研究，我制定了自己的功能来确定是否选择了内部块（需要wp数据）

这是代码

registerBlockType('test/parent', {
    name: 'Parent',
    edit: (props) => {
        const template = [['test/child'],['test/child']];
        if (props.isSelected || hasSelectedInnerBlock(props)) {
            return <InnerBlocks template={template}/>;
        }
        return <div>Click me to see my inner block</div>;
    },
    save: (props) => {
        return <InnerBlocks.Content />;
    }
};

function hasSelectedInnerBlock(props) {
    const select = wp.data.select('core/editor');
    const selected = select.getBlockSelectionStart();
    const inner = select.getBlock(props.clientId).innerBlocks;
    for (let i = 0; i < inner.length; i++) {
        if (inner[i].clientId === selected || inner[i].innerBlocks.length && hasSelectedInnerBlock(inner[i])) {
            return true;
        }
    }
    return false;
};

Answer 2

是的，这是可能的

解决方案

父组件：

在父组件中，您可以在组件 State 中说 childEdited 并在 flag 中添加一个 child 。 setChildEditted（），将此处理程序向下传递给具有prop的子组件。

class App extends Component {
  State={
    childEditted:false
  }

  setChildEditted = () =>{
      this.SetState({childEditted : true});
    }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          <childComponent onChangeHandler={this.setChildEditted} />
        </p>
      </div>
    );
  }
}

子组件：

如果具有 panel ，则

child组件将使用此处理程序，即使没有面板，您也可以在面板的 onChange（）上使用此处理程序道具。在 div 上使用它。

 class childComponent extends Component {
  render() {
    return (
      <div onChange={this.props.onChangeHandler}>

      </div>
    );
  }
}

这样，只要发生更改，父组件状态就会更新，并将更改传达给父组件。

有没有一种方法可以在父块中知道您正在编辑该父块的内部块？

2 个答案: