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

Posted 2023-02-19

【中文标题】Gutenberg/React 将动态属性传递给过滤函数

【英文标题】：Gutenberg/React pass dynamic property to filter function

【发布时间】：2019-06-02 11:32:47

【问题描述】：

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

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。会造成重复。

【问题讨论】：

不知道你的意思，你能澄清一下吗？

好的，我修改了问题

customClassName 组件的用途是什么？只是添加someName 类还是更多？

@MaazSyedAdeeb 添加一个动态的类名

类名是someName 还是会在其上做一些额外的逻辑？我问是因为就目前而言，自定义过滤器似乎有些多余。

【参考方案1】：

这里是简单的错字:)

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

注意：我想让道具能够覆盖类名，如果 需要。

另一种解决方案：

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

【参考方案2】：

如果 someName 是一个属性，你可以访问它

className=props.attributes.someName

【参考方案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'
);