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

Question

我正在使用 Gutenberg block filters 尝试在编辑器中向块的包装器组件添加动态 class 名称。

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

如果 someName 是一个属性，您可以访问它作为

className={props.attributes.someName}

Answer 2

这里是简单的打字错误:)

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] } />;

Answer 3

实际上，我猜你的问题有误。当然，someName 值存在于 attributes 对象中，它是 props 对象的一部分，因此您可以像下面这样简单地访问它：

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

我想说的另一件事是，您的代码不需要大括号和 return 函数：

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

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

Gutenberg/React pass dynamic property to filter function

reactjs

wordpress-gutenberg

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

Gutenberg/React pass dynamic property to filter function

reactjs

wordpress-gutenberg

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