web-dev-qa-db-ja.com

Reactの真のカスタム属性（Microdataなど）

私が開発しているサイトは、Microdataを利用しています（schema.orgを使用）。 Reactを使用してビューをレンダリングするように開発をシフトしているため、ReactはHTML仕様の属性のみをレンダリングしますが、Microdataはカスタムを指定します。 itemscopeなどの属性。

私はReactに比較的慣れておらず、まだコアを完全に理解する機会がないので、私の質問は、react.jsの機能を拡張して許可するための最良の方法は何でしょうか。 Microdataなどの定義済みのカスタム属性の場合

属性/小道具パーサーを拡張する方法はありますか、それとも渡されたすべての小道具をチェックしてDOM要素を直接変更するミックスインの仕事ですか？

（うまくいけば、解決策が明確になったときに、すべての人がこれをサポートできるように、拡張機能をまとめることができます。）

javascriptreactjsmicrodatareact-jsx
19
Chris Pearce

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属性のチェック全体を、便利なミックスインにラップすることができます。 このアプローチの問題は、組み込みのReactコンポーネント（React.DOMによって作成されたコンポーネント）では機能しないことです。。更新：React.DOMを詳しく見ると、これが思い浮かびます http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview 。基本的に、組み込みコンポーネントをミックスインを使用してカスタムコンポーネントにラップします。コンポーネントはReactの組み込みDOMコンポーネントに基づいて構築されているため、コンポーネントにミックスインを含める必要がなくても機能します。

実際の解決策は、ReactのDefaultDOMPropertyConfigの代わりにカスタム構成を挿入することですが、ドロップイン方式でそれを行う方法を見つけることができません（DOMPropertyはモジュールシステムによって隠されています） 。

10
tungd

「is」属性を使用することもできます。 Reactの属性ホワイトリストを無効にし、すべての属性を許可します。ただし、classとclassNameの代わりにforを記述する必要があります。 htmlForを使用する場合は、isの代わりに。

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

更新React 16のカスタム属性が可能になりました

反応で16のカスタム属性が可能になりました

16個のカスタム属性に反応

50
Christian Steinmann

これらの非標準プロパティが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

プロパティの中央に大文字があることに注意してください。

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

結果として、適切な小文字の属性が生成されます。

10
Reggie Pharkle

まだ答えを探している人のために： https://facebook.github.io/react/docs/tags-and-attributes.html

例：

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

これまでのところ、私が見つけた最良の方法は、 いくつかのAmp相互運用コード からリンクされている コメント 主題に関するreactのバグトラッカースレッドに基づいています。 React（15.5.4）とTypeScriptの新しいバージョンで動作するように少し変更しました。

通常のES6の場合、attributeNameの型注釈を削除するだけです。 DOMPropertyはreactのindex.d.tsで公開されていないため、TSではrequireを使用する必要がありましたが、通常の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" />

通常、このようにreactの内部部分を使用するのは悪い考えですが、他のどの方法よりも優れていると思います。これは、データなどの既存のオープンエンド属性と同じように機能し、JSXはTSでもタイプセーフです。とにかく、reactの次のメジャーバージョンはホワイトリストを廃止する予定なので、このシムを完全に削除する前に変更が必要ないことを願っています。

0
ShawnFumo