Пользовательские атрибуты реагирования в скобках

В этом ответе объясняется, как использовать недокументированное is возможность добавить пользовательский атрибут в элемент React. Однако я хотел бы добавить атрибут для использования с amp-bind, заключенный в квадратные скобки. Когда я пытаюсь это сделать, атрибут не добавляется:

const ampProps = {
  '[class]': 'foo.bar',
};

return <div is {...ampProps}><MyComponent></div>

Как я могу добавить пользовательский атрибут?

Источник

1 ответ

Для привязки AMP с помощью response вы можете использовать альтернативный синтаксис, упомянутый в официальном документе amp-bind.

Альтернативный XML-совместимый синтаксис также может использоваться в форме data-amp-bind-property.

пример You can write [text] binding as data-amp-bind-text что не даст ошибки в React.

Источник

Вам может потребоваться настроить React для принятия многих директив AMP с использованием ReactInjection.

После того, как вы это сделаете, HTML, созданный React, будет содержать его.

import { DOMProperty } from 'react-dom/lib/ReactInjection'
DOMProperty.injectDOMPropertyConfig({
    Properties: {
        '[class]': DOMProperty.MUST_USE_PROPERTY
    }
})

ОБНОВЛЕНИЕ (август 25-2017):

Приведенный выше код решает проблему с обычными тегами HTML, такими как div, ul, span и т. Д.

В настоящее время у меня проблема с размещением атрибута [src] внутри пользовательского списка усилителей. Код React не учитывает введенное свойство DOM для пользовательских тегов, код считает, что атрибут, начинающийся с "[", не является "безопасным", и удаляет его из "amp-list" независимо от настройки injectDOM PropertyConfig.

Существует RFC для React 16, который решит проблему: https://github.com/facebook/react/issues/10399

Я также разместил вопрос по адресу: https://github.com/facebook/react/pull/10385

Источник

Используйте альтернативный синтаксис

<tag data-amp-bind-x="foo">

вместо того

<tag [x]="foo">
Источник
Другие вопросы по тегам