让我们创建一个使用<InnerBlocks />
:
edit.js
父组件的返回类似于:
return(
<div className="carousel">
<div className="carousel__track">
<ul {...innerBlocksProps} className="carousel__list" />
</div>
</div>
)
edit.js
返回类似以下内容的子对象: return(
<li class="slide">
<figure>
<img src={url} data-id={id} alt={title} />
<figcaption>
<h5>{caption}</h5>
</figcaption>
</figure>
</li>
)
在父级中edit.js
我会创造一个像这样的状态;const [isPreview, setIsPreview] = useState(false)
当我点击;“编辑”;按钮状态设置为false
, 当我单击“a”时;预览(&Q);按钮状态设置为true
.我想当父母的国家isPreview
是true
我可以通过<ServerSideRender />
, 因此,我创建了一个服务器端渲染块,我们称之为;“myblocks/carousel预览”;我改变了edit.js
这样的家长:
return(
{
!isPreview
?
<div className="carousel">
<div className="carousel__track">
<ul {...innerBlocksProps} className="carousel__list" />
</div>
</div>
)
:
<>
<ServerSideRender
block="myblocks/carousel-preview"
attributes={{ /* pass children here?!? */ }}
/>
</>
我的主要问题是:我怎样才能传递给我的<ServerSideRender />
阻止我所在街区的孩子?事实上,我认为<ServerSideRender />
可能是这样的:
<?php
function RenderCarouselServerSide($attributes, $content) {
ob_start();
?>
<div class="carousel">
<div class="carousel__track">
<ul class="carousel__list" />
<?php foreach($attributes[\'children\'] as $child) :
$url = $child[\'url\'];
$id = $child[\'id\'];
$caption = $child[\'caption\'];
?>
<li class="slide">
<figure>
<img src="<?php echo $url; ?>" data-id="<?php echo $id; ?>" />
<figcaption>
<h5>"<?php echo $caption; ?>"</h5>
</figcaption>
</figure>
</li>
</ul>
<?php endforeach; ?>
</div>
</div>
<?php
return ob_get_clean();
}
但如何让孩子们$attributes
?