Gutenberg/React将动态属性传递给过滤函数

Question

我正在使用Gutenberg块过滤器尝试在编辑器中为块的包装器组件添加动态类名.

registerBlockType( name, {

    title: __( 'My Block' ),

    parent: [ 'myplugin/myblock' ],

    category: 'common',

    attributes: attributes,


    edit( { attributes, setAttributes, className } ) {      

        const { someName } = attributes;

        /* how can I pass someName from here to customClassName? */

        return (
            /* render something */
        );
    },

    save( { attributes } ) {

        const { someName } = attributes;

        /* how can I pass someName from here to customClassName? */

        return (
            /* render something */
        );
    },
});



const customClassName = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        return <BlockListBlock { ...props } className={ someName } />;
    };
}, 'customClassName' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'myplugin/myblock', customClassName );

问题:someName在常量中customClassName是未定义的.

如何someName从编辑或保存功能传递到常量customClassName？哪个将用于wp.hooks.addFilter.

注意:我无法添加wp.hooks.addFilter或customClassName直接在编辑或保存功能中.这会导致重复.

Answer 1

如果 someName 是一个属性，您可以通过以下方式访问它

className={props.attributes.someName}