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

【问题标题】：Gutenberg/React pass dynamic property to filter functionGutenberg/React 将动态属性传递给过滤函数
【发布时间】：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 还是会在其上做一些额外的逻辑？我问是因为就目前而言，自定义过滤器似乎有些多余。

标签： reactjs wordpress-gutenberg

【解决方案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'
);

【讨论】：