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

Question

我正在使用Gutenberg block filters尝试将动态类名添加到编辑器中 block 的包装器组件中。

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 );

问题:常量 customClassName 中的 someName 未定义。

如何将 someName 从编辑或保存函数传递给常量 customClassName？它将在 wp.hooks.addFilter 中使用。

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

Answer 1

这里有一个简单的错字:)

return <BlockListBlock className={ props.someName } { ...props } />;

NOTE: I would like to make props able to override the className if needed.

另一种解决方案:

return <BlockListBlock { ...props } className={ [props.someName, props.className] } />;