问题描述
我收到控制台错误
ReferenceError: selectimage is not defined
at edit (index.js?fb2e:95)
我认为 selectimage
是在以下古腾堡块中定义的:
/**
* Block dependencies
*/
import icon from './icon';
import './style.scss';
/**
* Internal block libraries
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const {
RichText,MediaUpload,BlockControls,BlockAlignmentToolbar,} = wp.editor
/**
* Register block
*/
export default registerBlockType(
'jsforwpblocks/heroblock',{
title: __( 'Hero Block','jsforwpblocks' ),description: __( 'Large block with hero image,text and buttons',category: 'common',icon: {
background: 'rgba(254,243,224,0.52)',src: icon,},keywords: [
__( 'Banner',__( 'Call to Action',__( 'Message',],attributes: {
message: {
type: 'array',source: 'children',selector: '.message-body',blockAlignment: {
type: 'string',default: 'wide',imgurl: {
type: 'string',default: 'http://placehold.it/500'
}
},getEditWrapperProps( { blockAlignment } ) {
if ( 'left' === blockAlignment || 'right' === blockAlignment || 'full' === blockAlignment ) {
return { 'data-align': blockAlignment };
}
},selectimage(value) {
console.log(value);
setAttributes({
imgurl: value.sizes.full.url,})
},edit: props => {
const { attributes: { message,blockAlignment },className,setAttributes } = props;
const onChangeMessage = message => { setAttributes( { message } ) };
return (
<div className={ className }>
<BlockControls>
<BlockAlignmentToolbar
value={ blockAlignment }
onChange={ blockAlignment => setAttributes( { blockAlignment } ) }
/>
</BlockControls>
<RichText
tagName="div"
multiline="p"
placeholder={ __( 'Add your custom message','jsforwpblocks' ) }
onChange={ onChangeMessage }
value={ message }
/>
<div className="media">
<MediaUpload
onSelect={selectimage}
render={ ({open}) => {
return <img
src={attributes.imgurl}
onClick={open}
/>;
}}
/>
</div>
</div>
);
},save: props => {
const { attributes: { message,blockAlignment,imgurl } } = props;
return (
<div
className={classnames(
`align${blockAlignment}`
)}
style={backgroundImage={imgurl}}
>
<h2>{ __( 'Call to Action','jsforwpblocks' ) }</h2>
<div class="message-body">
{ message }
</div>
</div>
);
},);
编辑
edit: props => {
const { attributes: { message,setAttributes } = props;
const onChangeMessage = message => { setAttributes( { message } ) };
function selectimage(value) {
console.log(value);
setAttributes({
imgurl: value.sizes.full.url,})
}
return (
<div className={ className }>
ReferenceError: attributes is not defined
at Object.render (index.js:101)
第 101 行是最后一行:
save: props => {
const { attributes: { message,imgurl } } = props;
return (
<div
className={classnames(
updated code is here (pastebin.com)。
感谢帮助。
解决方法
我认为您必须像在 className
中所做的那样将 save
中的 props
添加到 edit
对象析构中:
const { attributes: { message,blockAlignment,imgUrl },className } = props;
另外两件事:
- 下面几行您使用的是
class
,我也会将其更改为className
- 如果我在自定义块中使用
classnames
,我总是将它添加到我的导入中:
import classnames from 'lodash/classnames'
实际上还没有尝试过它是否可以在不导入的情况下工作。
,我刚刚在我的设置中快速检查了您的块(来自 pastebin 的原始版本 - 没有我以前的编辑),我遇到了同样的错误。但错误不是指save
,而是指edit
。在 imgUrl
中将 edit
添加到您的属性破坏中有所帮助(与 save
中相同):
const { attributes: { message,className,setAttributes } = props;
然后只在您的 imgUrl
MediaUpload
return
中使用 src
像这样:
return <img src={imgUrl} onClick={open} />;
,
作为对您在 Pastebin 上的第二个文件的补充,请尝试以下替代您的保存功能:
save: props => {
const { attributes: { message,imgUrl } } = props;
const divStyle = {
backgroundImage: 'url(' + imgUrl + ')',};
return (
<div
className={classnames(
`align${blockAlignment}`
)}
style={divStyle}
>
<h2>{ __( 'Call to Action','jsforwpblocks' ) }</h2>
<div className="message-body">
{ message }
</div>
</div>
);
},
而 classnames
导入实际上只是这样工作(但可能取决于您如何设置依赖项):
import classnames from 'classnames'