从组/列innerBlocks中排除父块可以通过使用wp.blocks.withSelect
高阶组件来实现。以下是一个示例代码:
import { withSelect } from '@wordpress/data';
const MyBlock = (props) => {
// 获取当前块的父块ID
const parentId = props.clientId;
// 获取所有内部块
const innerBlocks = props.innerBlocks;
// 过滤掉父块
const filteredBlocks = innerBlocks.filter(block => block.clientId !== parentId);
// 渲染过滤后的内部块
return (
<div>
{filteredBlocks.map(block => (
<div key={block.clientId}>
{/* 渲染内部块内容 */}
{block.name}
</div>
))}
</div>
);
};
// 使用withSelect高阶组件获取内部块数据
export default withSelect((select, props) => {
const { getBlock } = select('core/block-editor');
const { clientId } = props;
// 获取当前块的数据
const block = getBlock(clientId);
return {
innerBlocks: block.innerBlocks,
};
})(MyBlock);
在上面的代码中,我们首先使用withSelect
高阶组件获取当前块的内部块数据。然后,我们使用filter
方法过滤掉父块,得到一个新的内部块数组。最后,我们渲染过滤后的内部块内容。
这是一个基本的示例,你可以根据自己的需求进行修改和扩展。希望对你有帮助!
领取专属 10元无门槛券
手把手带您无忧上云