Soru

soyundan gelen olarak görünemez


Bunu görüyorum. Şikayet ettiği şey bir sır değil:

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.

Ben yazarım SomeComponent ve SomeOtherComponent. Ama ikincisi bir dış bağımlılık kullanıyor (ReactTooltip itibaren react-tooltip). Bunun dışsal bir bağımlılık olması büyük bir olasılık değil, ama buradaki argümanı "benim kontrolümün dışında olan bir kod" olduğunu deneymeme izin veriyor.

İç içe geçmiş bileşenin iyi çalıştığı göz önüne alındığında bu uyarı hakkında ne kadar endişelenmeliyim (görünüşte)? Ve bunu nasıl değiştirebilirim (dışsal bir bağımlılığı yeniden uygulamak istemediğim sürece)? Hala farkında olmadığım daha iyi bir tasarım var mı?

Bütünlük adına, işte burada SomeOtherComponent. Sadece render this.props.valueve ne zaman uyandığında: "Bazı araç ipucu mesajı" yazan bir araç ipucu:

class SomeOtherComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {value, ...rest} = this.props;
    return <span className="some-other-component">
      <a href="#" data-tip="Some tooltip message" {...rest}>{value}</a>
      <ReactTooltip />
    </span>
  }
}

Teşekkür ederim.


21
2018-01-30 03:16


Menşei


İlgili konu: github.com/wwayne/react-tooltip/issues/210 - Jordan Running


Cevaplar:


Uyarı iletisine dayanarak, ReactTooltip bileşeni, şunun gibi görünebilecek bir HTML oluşturur:

<p>
   <div>...</div>
</p>

Buna göre belge, bir <p></p> etiket sadece satır içi elemanlar içerebilir. Bu bir <div></div> içindeki etiketi uygun olmamalıdır, çünkü div etiket bir blok öğesidir. Yanlış yerleştirme, hataların render gibi görünmesine neden olabilir ekstra etiketlerjavascript ve css'inizi etkileyebilir.

Bu uyarıdan kurtulmak istiyorsanız, ReactTooltip bileşenini özelleştirmek isteyebilirsiniz veya bu uyarıcıyı düzelticinin düzeltmesini bekleyebilirsiniz.


28
2018-01-30 03:28



Evet, neyin işlendiğini anladım, ama o zaman, div Yeniden kullanılabilir hale getirilmeli, p? Ne kadar popüler olduğuyla uçuyor gibi görünüyor divs keyfi bir şekilde sarma için mi? - Sander Verhagen
Sanırım w3c tavsiyesinde olduğu için. Ayrıca, kolayca bir div Birlikte span Bu tür uyarılardan kaçınmak için, ancak kodun mantığında herhangi bir şeyi etkilemeden. - JD Hernandez
w3c öneri .. @judohrnndz haklı - Abdennour TOUMI
Bu yaktı. Teşekkürler. - reski


Benzer bir sorunla karşılaştım ve bileşeni "p" yerine "div" içine aldım ve hata gitti.


0
2018-04-29 14:32