React'te fazladan sarma <div> nasıl önlenir?

114

Bugün ReactJS'yi öğrenmeye başladım ve bir saat sonra problemle karşılaştım .. Sayfadaki bir div'in içine iki satır içeren bir bileşen eklemek istiyorum. Aşağıda yaptığım şeyin basitleştirilmiş bir örneği.

Bir html'im var:

<html>
..
  <div id="component-placeholder"></div>
..
</html>

İşlevi şu şekilde işle:

...
render: function() {

    return(
        <div className="DeadSimpleComponent">
            <div className="DeadSimpleComponent__time">10:23:12</div >
            <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
        </div>
    )
}
....

Ve aşağıda render diyorum:

ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));

Oluşturulan HTML şuna benzer:

<html>
..
  <div id="component-placeholder">
    <div class="DeadSimpleComponent">
            <div class="DeadSimpleComponent__time">10:23:12</div>
            <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
    </div>
</div>
..
</html>

React'in beni hepsini bir div "DeadSimpleComponent" içine sarmaya zorlaması beni pek mutlu etmedi. Açık DOM manipülasyonları olmadan bunun için en iyi ve basit çözüm nedir?

28.07.2017 GÜNCELLEME: React Bakımcıları, bu olasılığı React 16 Beta 1'e ekledi

React 16.2'den beri bunu yapabilirsiniz:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

javascript reactjs

— Kirill Reznikov
kaynak

4

mükemmel adlandırma uygulaması ;-)

— Kirill Reznikov

HTML dosyanızı görebilir miyim? Sorunuzu yanlış okudum. Yine de bir çözümüm olabilir.

— Louis93

Şunun gibi smth: jsfiddle.net/qawumm3v

— Kirill

Tek elemanlı bir bileşenle ilgili bir probleminiz mi var? Gerçekten mi?

— Dominic

Ne demek istiyorsun? Ben sadece React'i deniyorum, çok karmaşık olmamalı .. Ama sınırlama can sıkıcı görünüyor.

— Kirill Reznikov

142

Bu gereksinim React sürümünde (16.0)] 1 kaldırılmıştır , bu nedenle artık bu sarmalayıcıdan kaçınabilirsiniz.

React.Fragment'ı bir ana düğüm oluşturmadan bir öğe listesi oluşturmak için kullanabilirsiniz, resmi örnek:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Daha fazlası burada: Parçalar

— Luger
kaynak

1

Harika haber DmitryUlyanets. Planlanan bir çıkış tarihi var mı?

— Jonas Carlbaum

26 Eylül 2017'den beri yayınlandı, bkz. Reactjs.org/blog/2017/09/26/react-v16.0.html

— Tom

56

2017-12-05 Güncellemesi: React v16.2.0 artık alt öğelerde anahtarları belirtmeden bir bileşen oluşturma yönteminden birden çok alt öğe döndürmek için geliştirilmiş destekle parçaların oluşturulmasını tam olarak destekliyor:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

V16.2.0'dan önceki bir React sürümünü kullanıyorsanız, bunun <React.Fragment>...</React.Fragment>yerine kullanmak da mümkündür :

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Orijinal:

React v16.0, render yönteminde bir dizi öğeyi bir div içine sarmadan döndürmeyi tanıttı: https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Şu anda, anahtar uyarısından kaçınmak için her öğe için bir anahtar gereklidir ancak bu, gelecekteki sürümlerde değiştirilebilir:

Gelecekte, JSX'e anahtar gerektirmeyen özel bir parça sözdizimi ekleyeceğiz.

— Tom
kaynak

<> </> İçin yeni kısaltma sözdizimi harika. Bununla birlikte hala çok karışık hislerim var.

— Thulani Chivandikwa

@ThulaniChivandikwa Steno sözdizimi hakkındaki endişelerinizi dile getirebilir misiniz?

— Tom

1

Bence daha çok boş bir etiket kavramının JSX'te tuhaf olması ve tam olarak ne yaptığını bilmediğiniz sürece çok sezgisel olmamasıyla ilgili.

— Thulani Chivandikwa

7

Kullanabilirsiniz:

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

Daha fazla ayrıntı için bu belgelere bakın .

— Rolando Cintron
kaynak

3

Tüm dönüşü kaydırmak için () yerine [] kullanın.

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}

— Michael Cuneo
kaynak

2

DIV olmadan alt bileşenleri sarmak için bir bileşen oluşturdum. Buna gölge sarmalayıcı denir: https://www.npmjs.com/package/react-shadow-wrapper

— Matt Landers
kaynak

Paketinize bir sayı gönderdim, lütfen bir göz atabilir misiniz? Teşekkürler

— Antoni4

1

Bu hala gereklidir , AMA React şimdi ek bir DOM öğesi oluşturmadan öğeler oluşturduğunuzdan emin olun.

divReacts createElementyöntemi bir typeparametre gerektirdiğinden (normalde bir ebeveyn ile ) fazladan sarma gerekir either a tag name string (such as 'div' or 'span'), a React component type (a class or a function). Ancak bu, React'i tanıtmadan önceydi Fragment.

Bakınız createElement için bu YENİ api doc

React.createElement : Verilen türde yeni bir React öğesi oluşturun ve iade edin. Tür bağımsız değişkeni, bir etiket adı dizesi ('div' veya 'span' gibi), bir React bileşen türü (bir sınıf veya bir işlev) veya bir React parça türü olabilir .

resmi örnek, React.Fragment bakın .

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

— önemli
kaynak

0

O divelementten kurtulamayacaksın . React.render (), geçerli bir DOM düğümü döndürmelidir.

— Henrik Andersson
kaynak

div'ler göz ardı edilir, Knockout.JS de aynı şeyi yapar. bileşeninizin dış kısmında stil içermeyen bir div'e sahip olmak hiçbir şey etkilemez.

— Chris Hawkes

16

@ChrisHawkes, katılmıyorum. bir sarmalayıcı div, css seçicilerini etkiler.

— Downhillski

Tamamen React bileşenleri olmak istemediğiniz anlamsal öğelerle çalışırken, bu bir sorun haline gelir. Diyelim ki üstbilgi ve altbilgi öğeleri olan bir bölüm etiketi var ve bunların arasında React içinde kullanmak istemediğimiz bir google harita konteyneri var. O zaman React bileşenlerinin içine fazladan div: 'ler eklemek zorunda kalmadan, bir React bileşeni olarak bir başlık ve bir React bileşeni olarak Altbilgiye sahip olmak güzel olurdu ... Bu aptalca bir tasarımdır, eğer html'yi umursuyorsanız çıktınız ...

— Jonas Carlbaum

0

İşte "transculent" bileşenleri oluşturmanın bir yolu:

import React from 'react'

const Show = (props) => {
  if (props.if || false) {
    return (<React.Fragment>{props.children}</React.Fragment>)
  }
  return '';
};

----


<Show if={yomama.so.biq}>
    <img src="https://yomama.so.biq">
    <h3>Yoamama</h3>
<Show>

— Ярослав Рахматуллин
kaynak

0

Çözüm de var. Aşağıdaki blok kodu, React.Fragment'a ihtiyaç duymadan parça üretir.

return [1,2,3].map(i=>{
if(i===1) return <div key={i}>First item</div>
if(i===2) return <div key={i}>Second item</div>
return <div key={i}>Third item</div>
})

— erfan seidipoor
kaynak

0

Bu sorunun yanıtlandığını biliyorum, elbette React.Fragment'ı kullanabilirsiniz, bu bir düğüm oluşturmaz, ancak işleri bir div gibi gruplayalım.

Ek olarak, eğlenmek istiyorsanız, fazladan div'leri kaldıran bir React modu uygulayabilir (ve pek çok şey öğrenebilirsiniz) ve bunun için react kod tabanının kendisinde bunu nasıl yapabileceğinize dair harika bir video paylaşmak istiyorum.

https://www.youtube.com/watch?v=aS41Y_eyNrU

Bu elbette pratikte yapacağınız bir şey değil ama iyi bir öğrenme fırsatı.

— Gabriel P.
kaynak