我不太熟悉React和Redux。我对Gutenberg在save函数中获取withState变量的值有问题。这是我的代码:
edit( {attributes, setAttributes, className} ) {
var link_text = attributes.link_text;
var link_url = attributes.link_url;
var svg_url = attributes.svg_url;
var template_url = ww_blocks.templateUrl;
var hasExternalURL = attributes.hasExternalURL;
function onChangeLinkText ( content ) {
setAttributes({link_text: content})
}
function onChangeLinkURL ( content ) {
setAttributes({link_url: content})
}
setAttributes({svg_url: template_url + \'/img/icons.svg#button-next\'});
const LinkToggleControl = withState( {
hasExternalURL: false,
} )( ( { hasExternalURL, setState } ) => (
<ToggleControl
label="Externer Link"
help={ hasExternalURL ? \'Es ist ein externer Link.\' : \'Kein externer Link.\' }
checked={ hasExternalURL }
onChange={ () => setState( ( state ) => ( { hasExternalURL: ! state.hasExternalURL } ) ) }
/>
) );
return ([
<InspectorControls>
<PanelBody title="Link Parameter">
<div id="ww-container-inspector-control-wrapper">
<label class="blocks-base-control__label" for="mce_1">Link Text</label>
<TextControl
onChange={onChangeLinkText} // onChange event callback
value={link_text} // Input Binding
/>
<label class="blocks-base-control__label" for="mce_2">Link URL</label>
<TextControl
onChange={onChangeLinkURL} // onChange event callback
value={link_url} // Input Binding
/>
<LinkToggleControl />
</div>
</PanelBody>
</InspectorControls>,
<div className={ className }>
<a class="btn btn-std" href="#">
<svg role="img" class="symbol" aria-hidden="true" focusable="false">
<use href={svg_url}></use>
</svg>
<span>{link_text}</span>
</a>
</div>
]);
},
save( { attributes } ) {
return (
<a className="btn btn-std" href={attributes.link_url} target={ attributes.hasExternalURL ? \'_blank\' : \'\' } title={ attributes.hasExternalURL ? \'Seite öffnet in neuem Fenster\' : \'\' }>
<svg role="img" class="symbol" aria-hidden="true" focusable="false">
<use href={attributes.svg_url}></use>
</svg>
<span>{attributes.link_text}</span>
</a>
);
},
} );
最合适的回答,由SO网友:Tom J Nowell 整理而成
块不是这样工作的。如果你想保存一些东西,it must be a block attribute.
withState
允许函数具有内部状态,因此如果要将切换控件添加到块UI中,这很有用,但不应使用它存储需要保存的内容。因此,您可以使用它来帮助构建块的UI,保存临时内容,以及任何不需要解决且可以消除的内容。E、 g.面板是否打开或折叠。
此外,如果我们忽略这一点,并尝试使用withState
我们遇到了几个问题:
save函数中的状态将不相同,因此该值不会保留HTML中的信息,但由于它不是块属性,因此不会保存,下次打开编辑器时,它将消失,需要重置,或者HTML将更改withState
用于React组件内部,但save
方法用于生成要放入数据库的最终HTML这里的根本问题是LinkToggleControl
正在使用本地临时状态存储是否已切换,何时应使用setAttributes
相反