Question

我正在使用RangeControl来确定我应该在innerblock模板上使用多少列，但问题是它仅返回rangecontrol的默认值和条件不起作用。

尝试使用三元条件。

<PanelBody>
    <RangeControl
        label="Columns"
        value={ props.attributes.columns }
        min={1}
        max={4}
        onChange={newColumns => { props.setAttributes({ columns: newColumns }); }} />
</PanelBody>


<div class={props.attributes.layout}>
    {

          ( props.attributes.columns == 1 ) ? 

          <InnerBlocks template={[
            [ 'cgb/columns' ],

        ]}
        />      
         : ( props.attributes.columns == 2 ) ? 
        <InnerBlocks template={[
            [ 'cgb/columns' ],
            [ 'cgb/columns' ],

        ]}
        />      
        : ( props.attributes.columns == 3 ) ?                           
        <InnerBlocks template={[
            [ 'cgb/columns' ],
            [ 'cgb/columns' ],
            [ 'cgb/columns' ]           
            ]}
            />              
        : "error"
    }
</div>

我希望输出响应该条件，例如，我的默认RangeControl值为3，因此当我加载该块时，它仅返回3列，而不能使其使用以下命令返回2或1列RangeControl。

Answer 1

您应该只调用一次innerBlocks。然后根据您的范围控制值设置模板。这是要放在 return 之前的示例：

exports[`BookingReference Tests should render BookingReference component 
with check-in button 1`] = `
<div class="condition-table thankyouSection">
<div class="conditions-types">
    <div class="type">
        <div></div>
    </div>
    <div class="type">
        <div></div>
    </div>
</div>
<div class="condition-values">
    <div class="value">ABCDE12345</div>
    <div class="value">1 June 2018</div>
</div>

 // in here should be the missing component


 </div>
 `;

在InnerBlocks部分中，您将其称为TEMPLATE

    var TEMPLATE = [];
    for (var i = 0; i < columns; i++) {
        var templateContent = [ 'cgb/columns', {} ];
        TEMPLATE.push(templateContent);
    }

如何修复gutenburg InnerBlocks以RangeControl响应

1 个答案: