web-dev-qa-db-ja.com

className属性はReactjsのid属性の役割を果たしますか?

Id属性はコンポーネントが再利用されないことを意味するため、Reactjsコンポーネントでid属性が使用されることはめったにないので、idの代わりにclassName属性が使用されますか?この場合、HTMLのクラス属性に相当するReactjsは何ですか?

6
Dipen

classNameは、他の場所と同様に、CSSスタイリングのクラス名に使用されます。

スタイリングの目的で、他の方法でclassNameを指定するのと同じ方法で、一意のidを指定できますが、それは他のclassNameの使用法を意味するものではなく、idclassNameと直接同等になることはありません。複数のクラス名を含めることができますが、いずれも一意である必要はありません。 (Reactに関係なく、 スタイリングにidを使用しないかなりの理由 もあります)。

Reactでidを指定しないより一般的な理由は、状態または小道具を使用して制御できるため、実際のDOMから要素を検索するためにフックを追加する必要がほとんどないためです。必要な動的な処理を実行するレンダリングの変更。doで要素を取得する必要がある場合は、ref名を付けて使用できます。 getDOMNode()

7
Jonny Buchanan

Insinの答えに追加すると、IDには実用的な用途がありますが、スタイリングはその1つではありません。

2つのケースは、フラグメント識別子と入力/ラベルのペアです。その場合、通常、グローバルに一意であることが保証されているIDを生成する必要があります(ただし、レンダリング間で一貫性があります)。そのためには、 nique-id-mixin のようなミックスインを使用します。

2
Brigand

IDは、1回限りの使用(Reactおよび一般的に))または1回限りのインスタンス用です。

classNamesは、複数の用途(Reactおよび一般的に))または何度も使用するためのものです-従来のCSSでクラスが使用されるのと同じ方法です。

0

まず第一に、IDはReactで使用され、必ずしも再利用を妨げるわけではありません。たとえば、要素を使用する場合は、IDを指定する必要があります(タグの「list」属性から参照できるようにするため)。その場合、私は通常、カウンター変数を使用してIDを自動生成します。したがって、IDと再利用はお互いを除外する必要はありません。

質問に答えるために、代わりにclassName属性が使用され、class属性と同じように機能します。 「react/addons」モジュールは、className値を簡単に作成するためのユーティリティを提供します。

0
rogierschouten