Истинные пользовательские атрибуты (например, микроданные) в React

Сайт, который я разрабатываю, использует микроданные (используя schema.org). Поскольку мы перекладываем разработку на использование React для визуализации наших представлений, я столкнулся с блокировщиком, в котором React будет отображать только атрибуты в спецификации HTML, однако в микроданных указываются такие пользовательские атрибуты, как itemscope,

Поскольку я относительно новичок в React и еще не имел возможности полностью понять ядро, мой вопрос заключается в том, как лучше всего расширить функциональные возможности act.js, чтобы включить определенные пользовательские атрибуты, например, микроданные?

Есть ли способ расширить парсер атрибутов /props или это работа для mixin, который проверяет все переданные props и изменяет элемент DOM напрямую?

(Надеюсь, мы сможем собрать расширение для всех, чтобы обеспечить поддержку, когда решение будет ясным.)

Источник

5 ответов

Решение

Вы должны быть в состоянии сделать это с componentDidMount:

...
componentDidMount: function() {
  if (this.props.itemtype) {
    this.getDOMNode().setAttribute('itemscope', true)
    this.getDOMNode().setAttribute('itemtype', this.props.itemtype)
  }

  if (this.props.itemprop) {
    this.getDOMNode().setAttribute('itemprop', this.props.itemprop)
  }
}
...

Целую проверку атрибутов микроданных можно упаковать в миксин для удобства. Проблема этого подхода в том, что он не будет работать для встроенного компонента React (компонентов, созданных React.DOM), Обновление: если присмотреться React.DOMЯ придумываю это http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview. По сути, мы оборачиваем встроенные компоненты в пользовательский компонент с помощью нашего миксина. Поскольку ваши компоненты основаны на встроенных компонентах DOM в React, это будет работать без необходимости включать миксины в компоненты.

Реальным решением было бы внедрение пользовательской конфигурации вместо React DefaultDOMPropertyConfigОднако я не могу найти способ сделать это в манере (DOMProperty скрыт модульной системой).

Источник

Вы также можете использовать атрибут " есть ". Он отключит белый список атрибутов React и разрешит каждый атрибут. Но ты должен написать class вместо className а также for вместо htmlFor если вы используете is,

<div is my-custom-attribute="here" class="instead-of-className"></div>

Обновление React 16 пользовательских атрибутов теперь возможно

В реакции теперь возможно 16 пользовательских атрибутов

Реагировать на 16 пользовательских атрибутов

Источник

It looks like these non-standard properties have been added to React

itemProp: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html
itemScope: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE, // Microdata: http://schema.org/docs/gs.html
itemType: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html

Note that properties have capital letter in the middle:

<div itemProp="whatever..." itemScope itemType="http://schema.org/Offer">

will generate proper lowercase attributes as result.

Источник

Для тех, кто все еще ищет ответы: https://facebook.github.io/react/docs/tags-and-attributes.html

Пример:

<div itemScope itemType="http://schema.org/Article"></div>
Источник

Пока что лучший метод, который я нашел, основан на некотором коде взаимодействия Amp, связанном с комментарием к теме отслеживания ошибок реагирования на эту тему. Я немного изменил его для работы с более новой версией React (15.5.4) и TypeScript.

Для обычного ES6 вы можете просто удалить аннотацию типа для attributeName. Использование require было необходимо в TS, так как DOMProperty не представлен в index.d.ts реагирования, но снова импорт может использоваться в обычном ES6.

// tslint:disable-next-line:no-var-requires
const DOMProperty = require("react-dom/lib/DOMProperty");
if (typeof DOMProperty.properties.zz === "undefined") {
    DOMProperty.injection.injectDOMPropertyConfig({
        Properties: { zz: DOMProperty.MUST_USE_ATTRIBUTE },
        isCustomAttribute: (attributeName: string) => attributeName.startsWith("zz-")
    });
}

Теперь вы можете использовать любой атрибут, начинающийся с zz-

<div zz-context="foo" />

Обычно было бы плохой идеей использовать внутренние части реакции, как это, но я думаю, что это лучше, чем любой другой метод. Он работает так же, как существующие открытые атрибуты, такие как data, а JSX даже безопасен от типов в TS. Я полагаю, что следующая основная версия реагирования в любом случае покончит с белым списком, так что, надеюсь, изменения не потребуются, прежде чем мы сможем полностью удалить эту прокладку.

Источник
Другие вопросы по тегам