React: 重複するスタイル（例：borderとborderBottom）を使用する場合の警告

作成日 2016年03月26日 · 20コメント · ソース: facebook/react

この「最初の良いバグ」は@YongPilMoonによって取得されます。それがあなたでない限り、それに取り組んではいけません！

これは数回前に議論されましたが、結論は出ていないと思いますし、問題を解決しようとするPRはさまざまな理由で統合されませんでした。

これらのPRを古くなったものとして閉じ、これに関するディスカッションを再起動したいと思います。
パフォーマンスを考慮すると、 @ sebmarkbageと@syranideからの結論は

競合するスタイルルールをまったく許可しないことを検討する必要があります。

— https://github.com/facebook/react/pull/2013#issuecomment -57338177

私見、すべてのものは、単に重複を禁止し、開発者に警告する方が良いと考えました。

— https://github.com/facebook/react/pull/4661#issuecomment -132996649

@ianobermillerによるRadiumは、 https：//github.com/FormidableLabs/radium/issues/95でも同じ結論に達しましたが、その後、反発がありました。 React Nativeはスタイルの拡張を許可しているようですが、いくつかの属性に対してのみです（たとえば、 marginとpaddingですが、 border許可していません）。

これに関する古いプルリクエストを閉じ、同意していると思われる動作の実装を追跡するためにこの問題を作成します。 borderとborderBottom場合、 __DEV__警告する必要があります。同時に使用されます。この問題では、より詳細な情報について説明できます（無視する必要がありますか？ホワイトリストに登録されたいくつかのプロパティを許可する必要がありますが、他のプロパティには警告する必要がありますか？）。

移行戦略として、本当にこれらのショートカットが必要な場合は、 https：//github.com/ActionIQ/style-builderなどを使用することをお勧めします。これは、統合スタイリングを実装するときに決定する必要があることでもあります。

最も参考になるコメント

サードパーティコンポーネントがスタイルを定義し、オーバーライドを許可する状況はどうですか？コンポーネントが独自のborderスタイルを定義していて、 borderBottomスタイルをオーバーライドしたいとしますか？

aweary 2016年03月29日

👍8

全てのコメント20件

@gaearonこれをリサーフェシングしていただきありがとうございます！ラジウム号を開いてから1年が経ちました。

私のような速記プロパティについての警告のアイデアのようにborderではなく、 borderBottom 。長いプロパティ名を使用してスタイルオブジェクトをマージする場合、驚くことはありません。

質問。この問題の目的は、個々のスタイルオブジェクトの分析のみに対処することですか、それとも条件付きで適用されるプロパティの衝突の可能性について分析して警告することも必要ですか？

mattborn 2016年03月28日

質問。この問題の目的は、個々のスタイルオブジェクトの分析のみに対処することですか、それとも条件付きで適用されるプロパティの衝突の可能性について分析して警告することも必要ですか？

質問がわかりませんが、詳しく教えていただけますか？

gaearon 2016年03月29日

承知しました。同じ要素にborderとborderColor両方を含めることが無効な場合は、これについて警告するのが理にかなっています。私の経験では、この組み合わせは簡単に回避できますが、スタイルが動的に適用されている場合（小道具や状態、メディアクエリ、ラジウムなどに基づく条件付きロジック）、または小道具として渡されてマージされている場合、予測とデバッグはより困難です。低次のスタイルオブジェクトを使用します。関係する境界線に影響を与える可能性のある他の属性がないときに省略形border属性の警告が発生した場合、省略形borderは有用なデバッグツールというより、独断的なルールのように見えます。まだ技術的に有効です。ただし、別のスタイルオブジェクトに属性がある場合（たとえば、ホバー時にborderColorを変更する場合）、関係する境界線に影響し、実行時に、すでに省略形borderがあるノードに適用されます。

mattborn 2016年03月29日

ああ、良い点。おそらく、スタイルが重複していることを_知っている_場合にのみ警告しますが、それがどれほど簡単かはわかりません。私はそれについてあまり考えていませんし、良い解決策もありません。

gaearon 2016年03月29日

👍2

@gaearon私がもっと好きな別の解決策は、 https： //github.com/facebook/react/issues/5397に従ってcsstextを使用することです。これは、IIRCがこれらの問題のスーパーセットをきれいに解決します。