javascript - 古腾堡 InnerBlocks 的“TypeError:无法读取 null 的属性‘innerBlocks’”
问题描述
我最近问了一个关于同一主题的问题。在那里我自己发现了这个问题。但不幸的是,我遇到了一个新错误:
TypeError: Cannot read property 'innerBlocks' of null
at InnerBlocks.synchronizeBlocksWithTemplate (script.build.js?ver=1:149405)
at InnerBlocks.componentDidMount (script.build.js?ver=1:149366)
at zc (react-dom.min.js?ver=16.6.3:146)
at wc (react-dom.min.js?ver=16.6.3:138)
at fa (react-dom.min.js?ver=16.6.3:137)
at ng (react-dom.min.js?ver=16.6.3:149)
at Se (react-dom.min.js?ver=16.6.3:40)
所以我用相同的代码尝试了它,但我没有让它工作:
const {registerBlockType} = wp.blocks;
const {InspectorControls, RichText, MediaUpload} = wp.editor;
import {TextControl} from '@wordpress/components';
import {InnerBlocks} from '@wordpress/editor';
let blockStyle = {
marginTop: "25px",
marginBottom: "25px;"
};
registerBlockType('myself/test-component', {
title: 'Test component',
icon: 'editor-insertmore',
category: 'common',
attributes: {
title: {
type: 'string'
}
},
edit(props) {
const {setAttributes, attributes} = props;
function setTitle(changes) {
setAttributes({
title: changes
})
}
return (
<div style={blockStyle}>
<TextControl
placeholder="Titel"
value={attributes.title}
onChange={setTitle}
/>
<InnerBlocks
templateLock={false}
renderAppender={(
() => <InnerBlocks.ButtonBlockAppender/>
)}
/>
</div>
)
},
save(props) {
const {attributes, className} = props;
return (
<div style={blockStyle}>
<InnerBlocks.Content/>
</div>
);
}
});
然后我检查了作为插件嵌入的构建的 script.js 文件。this.props.block
那里我们有以下情况null
。
key: "componentDidMount",
value: function componentDidMount() {
var innerBlocks = this.props.block.innerBlocks; // only synchronize innerBlocks with template if innerBlocks are empty or a locking all exists
if (innerBlocks.length === 0 || this.getTemplateLock() === 'all') {
this.synchronizeBlocksWithTemplate();
}
if (this.state.templateInProcess) {
this.setState({
templateInProcess: false
});
}
}
更新
该变量this.props
具有以下变量:
有没有人面临同样的问题或有解决方法?
解决方案
再次,我解决了我自己的问题。最后,这个问题对我来说并不清楚,但它确实有效。
我现在所做的只是简单地将wp.editor
用作InnerBlocks
组件的导入实例。有了它,它现在加载了完整的 InnerBlocks 编辑器,我现在可以在其中添加自定义块。
const {registerBlockType} = wp.blocks;
const {InspectorControls, RichText, InnerBlocks} = wp.editor; //Imported the InnerBlocks from this source.
import {CheckboxControl, TextControl} from '@wordpress/components';
// Removed this line
// import {InnerBlocks} from "@wordpress/editor";
推荐阅读
- mysql - 在连接两个表时计算没有缺失值的总销售额
- html - 如何阻止固定元素阻止滚动其后面的页面?
- java - @Mocked、@Injectable 和 @Capturing 之间有什么区别?
- c# - Unity,如何一次更新一个 UI 元素
- java - Firebase Image Load with Glide 不适用于 Android SDK 28 (Pie)
- canvas - 画布旋转时在 p5.js 画布上绘图
- php - 如何在 PostgreSQL 中查询完整的 JSON 数组?
- sqlite - 尝试在haskell中删除sqlite表时出错
- reactjs - http-proxy-middleware 不代理到其他服务器的索引页面?
- apache - 如何拒绝访问 url,如果它包含字符串“.html”(使用 htaccess,我想得到一个 404)