Динамическое свойство Gutenberg / React pass для функции фильтрации - PullRequest
Новая
       7

Динамическое свойство Gutenberg / React pass для функции фильтрации

0 голосов
/ 07 января 2019

Я использую Фильтры блоков Гутенберга , чтобы попытаться добавить динамическое имя класса в компонент-оболочку блока в редакторе. 

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 непосредственно в функцию редактирования или сохранения. Это вызовет повторение.

Ответы [ 3 ]

0 голосов
/ 13 января 2019

Простая опечатка здесь:) 

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

ПРИМЕЧАНИЕ : я бы хотел, чтобы реквизиты могли переопределять className, если необходимо.

Другое решение: 

return <BlockListBlock { ...props } className={ [props.someName, props.className] } />;
0 голосов
/ 16 января 2019

На самом деле, я полагаю, вы допустили ошибку в своем вопросе. несомненно, значение 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'
);
0 голосов
/ 12 января 2019

Если someName является атрибутом, вы можете получить к нему доступ как 

className={props.attributes.someName}
...