时间戳

首页 > 解决方案 > 带有模板的 InnerBlocks 返回块计数为零

reactjs - 带有模板的 InnerBlocks 返回块计数为零

问题描述

我正在尝试使用 InnerBlocks 模板创建一个块。由于该块具有模板，因此该块应始终至少有 1 个子级。如果孩子计数达到 0，那么我想删除这个块，因为它会是空的。

我遇到的问题是“blockCount”的值在第一次创建块时瞬间为 0，因此它在创建之前会自行删除。这是 getBlockCount 的错误，还是有办法在我检查块数之前等待模板填充 InnerBlocks？

这是我的编辑功能供参考。

edit: props => {
  const { setAttributes } = props
  const { className } = props.attributes
  const { removeBlock } = useDispatch('core/block-editor')
  const { blockCount } = useSelect(select => ({
    blockCount: select('core/block-editor').getBlockCount(props.clientId)
  }))
  if (blockCount === 0) {
    removeBlock(props.clientId)
  }
  return (
    <div className={ className }>
      <InnerBlocks
        allowedBlocks={ ['my/block'] }
        template={ [['my/block']] }
        templateLock={ false }
        renderAppender={ false }
      />
    </div>
  )
}

标签： reactjsreact-hookswordpress-gutenberggutenberg-blocks

解决方案

Github 上提供的解决方案（并且效果很好）是将块长度保存到 ref，然后 useEffect 观察更改，如果值返回 0，则删除块。

edit: props => {
  const { setAttributes } = props
  const { className } = props.attributes
  const { removeBlock } = useDispatch('core/block-editor')
  const { blockCount } = useSelect(select => ({
    blockCount: select('core/block-editor').getBlockCount(props.clientId)
  }))
  const previousBlockCount = useRef(blockCount)
  useEffect(() => {
    if (previousBlockCount.current > 0 && blockCount === 0) {
      removeBlock(props.clientId)
    }
    previousBlockCount.current = blockCount
  }, [blockCount, props.clientId])
  return (
    <div className={ className }>
      <InnerBlocks
        allowedBlocks={ ['my/block'] }
        template={ [['my/block']] }
        templateLock={ false }
        renderAppender={ false }
      />
    </div>
  )
}

推荐阅读