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

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

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

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

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

Ответ 1

Вы можете сделать это с помощью 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)
  }
}
...

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

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

Ответ 2

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

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

Update React Теперь доступны 16 пользовательских атрибутов

В реале теперь доступны 16 пользовательских атрибутов

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

Ответ 3

Похоже, что эти нестандартные свойства были добавлены в 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

Ответ 4

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

Пример:

<div itemScope itemType="http://schema.org/Article"></div>

Ответ 5

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

Для обычного ES6 вы можете просто удалить аннотацию типа для attributeName. Использование требования требовалось в 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" />

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