React: Peringatkan saat menggunakan gaya yang tumpang tindih (mis. Border dan borderBottom)

Dibuat pada 26 Mar 2016 · 20Komentar · Sumber: facebook/react

"Bug pertama yang baik" ini diambil oleh @YongPilMoon. Jangan mengerjakannya kecuali itu Anda!

Hal ini telah dibahas beberapa kali sebelumnya, tetapi menurut saya belum ada kesimpulan, dan PR yang ingin menyelesaikan masalah tersebut tidak digabungkan karena berbagai alasan.

Saya ingin menutup PR tersebut karena sudah usang, dan memulai ulang diskusi tentang ini.
Performa dipertimbangkan, kesimpulan dari @sebmarkbage dan @syranide tampaknya adalah:

Kami harus mempertimbangkan untuk tidak mengizinkan aturan gaya yang bertentangan sama sekali.

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

IMHO, semua hal dianggap lebih baik untuk tidak mengizinkan tumpang tindih dan memperingatkan di dev.

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

Radium oleh @ianobermiller sampai pada kesimpulan yang sama di https://github.com/FormidableLabs/radium/issues/95 tetapi ada beberapa reaksi negatif setelahnya. React Native tampaknya mengizinkan perluasan gaya tetapi hanya untuk beberapa atribut (misalnya margin dan padding , tetapi bukan border ).

Saya menutup permintaan pull lama tentang ini, dan membuat masalah ini untuk melacak implementasi perilaku yang tampaknya kita setujui: kita harus memperingatkan di __DEV__ saat border dan borderBottom digunakan pada waktu yang sama. Kita dapat membahas lebih spesifik (harus diabaikan? Haruskah kita mengizinkan beberapa properti yang masuk daftar putih tetapi memperingatkan untuk yang lain?) Dalam masalah ini.

Sebagai strategi migrasi, kami dapat menyarankan orang untuk menggunakan sesuatu seperti https://github.com/ActionIQ/style-builder jika mereka benar-benar membutuhkan pintasan tersebut. Itu juga sesuatu yang perlu kita putuskan saat menerapkan gaya terintegrasi.

Masalah terkait:

# 2231
# 2407
# 5030
https://github.com/FormidableLabs/radium/issues/95

PR terkait:

# 2013
# 4661

DOM HTML Bug good first issue (taken)

Sumber

gaearon

Komentar yang paling membantu

Bagaimana dengan situasi di mana komponen pihak ketiga menentukan gaya dan memungkinkan penggantian? Katakanlah sebuah komponen mendefinisikan gayanya sendiri border dan saya hanya ingin mengganti gaya borderBottom ?

aweary pada 29 Mar 2016

👍8

Semua 20 komentar

@gaearon Terima kasih telah

Saya suka gagasan peringatan tentang properti singkatan seperti border , tetapi bukan borderBottom . Seharusnya tidak ada kejutan saat menggabungkan objek gaya menggunakan nama properti yang lebih panjang.

Pertanyaan. Apakah maksud dari masalah ini hanya untuk membahas analisis objek gaya individual atau adakah keinginan untuk menganalisis dan memperingatkan tentang kemungkinan benturan properti yang diterapkan secara bersyarat?

mattborn pada 28 Mar 2016

Pertanyaan. Apakah maksud dari masalah ini hanya untuk membahas analisis objek gaya individual atau adakah keinginan untuk menganalisis dan memperingatkan tentang kemungkinan benturan properti yang diterapkan secara bersyarat?

Tidak yakin saya mengerti pertanyaannya, bisakah Anda menjelaskannya?

gaearon pada 29 Mar 2016

Tentu. Jika tidak sah memiliki border dan borderColor pada elemen yang sama, maka masuk akal untuk memperingatkan tentang ini. Menurut pengalaman saya, kombinasi ini mudah untuk dihindari, tetapi lebih sulit diantisipasi dan di-debug ketika gaya diterapkan secara dinamis (logika bersyarat berdasarkan props atau status, kueri media, Radium, dll.) Atau diturunkan sebagai props dan digabungkan dengan objek gaya urutan lebih rendah. Jika peringatan untuk singkatan border terjadi ketika tidak ada atribut lain yang mungkin mempengaruhi perbatasan, maka peringatan tersebut lebih seperti aturan dogmatis daripada alat debugging yang membantu karena singkatan border adalah masih valid secara teknis. Namun, jika ada atribut dalam objek gaya terpisah — seperti mengubah borderColor saat hover misalnya — itu akan mempengaruhi perbatasan yang terlibat dan akan diterapkan saat runtime ke node yang sudah memiliki singkatan border di atasnya, saya ingin diperingatkan sedini mungkin karena di sinilah hal-hal cenderung merusak bagi saya.

mattborn pada 29 Mar 2016

Ah, poin yang bagus. Saya mungkin akan memperingatkan hanya jika kita _tahu_ gayanya tumpang tindih tetapi saya tidak yakin betapa mudahnya untuk membedakannya. Saya belum banyak memikirkannya dan saya tidak punya solusi yang baik.

gaearon pada 29 Mar 2016

👍2

@gaearon Solusi alternatif yang lebih saya sukai adalah menggunakan csstext sesuai https://github.com/facebook/react/issues/5397 , yang IIRC dengan rapi memecahkan superset dari masalah ini.

jimfb pada 29 Mar 2016

aweary pada 29 Mar 2016

👍8

Saya sudah mulai mengerjakan fungsi pembantu yang sangat sederhana untuk mengubah properti steno menjadi bentuk panjang (antara lain): https://github.com/rtsao/lostyle/tree/master/src ( docs )

rtsao pada 14 Sep 2016

👍1

Ini sangat tidak dapat diprediksi dan membingungkan dan saya baru saja mengalami ini.

Saya akan menyarankan kami setidaknya memperingatkan pada pembaruan ketika kami tahu itu bermasalah? Artinya, jika kita beralih dari {background: a, backgroundSize: b} ke {background: c, backgroundSize: b}, peringatkan bahwa backgroundSize sedang diganti (tetapi jika backgroundSize berubah pada saat yang sama, jangan peringatkan). Kita dapat melakukan ini untuk semua singkatan properti dan mengetahui apakah itu bermasalah dari urutan enumerasi properti.

sophiebits pada 24 Mei 2018

👍1

Menandai sebagai "edisi pertama yang baik". Mari tambahkan peringatan khusus DEV untuk ini sesuai komentar saya di atas. Saya pikir tempat yang baik untuk mulai menyelidiki adalah di sini:

https://github.com/facebook/react/blob/v16.4.0/packages/react-dom/src/client/ReactDOMFiberComponent.js#L619

Jika Anda ingin melakukan ini, beri komentar di sini sehingga tidak ada dua orang yang mengerjakan ini.

sophiebits pada 24 Mei 2018

👍1

@sophiebits , saya senang mengerjakan yang ini :)

supertinou pada 24 Mei 2018

👍1

@supertinou Itu milikmu!

sophiebits pada 24 Mei 2018

❤2

Pukul saja ini dan memang terkejut dan bingung karenanya.

craigkovatch pada 13 Jun 2018

@supertinou Hanya ingin memeriksa apakah ada yang bisa saya bantu dalam hal ini.

sophiebits pada 13 Jun 2018

@sophiebits Hai, saya tidak ingin menginjak kaki siapa pun: D tetapi saya telah memeriksa masalah ini, menirunya, dan ingin sekali mencobanya tetapi saya tidak tahu apakah @supertinou masih mengerjakannya Itu.

mirkojotic pada 18 Jun 2018

Saya membuat kode untuk merekap / menjelaskan apa yang terjadi https://codepen.io/giuseppegurgone/pen/mjKbmq?editors=0010 @gaearon / @sophiebits beri tahu saya jika saya lupa sesuatu.