Kardeş öğeleri bir ana etikete sarmadan nasıl oluştururum?

Çoğu durumda, bir ana etikete sahip olmak bir sorun değildir.

React.createClass({
    render: function() {
        return (
            <tbody>
                <tr><td>Item 1</td></tr>
                <tr><td>Item 2</td></tr>
            </tbody>
        );
    }
});

Ancak, bir oluşturma işlevinde bir ebeveyn olmadan kardeş öğelere sahip olmanın mantıklı olduğu bazı durumlar vardır ve özellikle bir tablo söz konusu olduğunda, bir tablo satırını bir div.

React.createClass({
    render: function() {
        return (
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
        );
    }
});

İkinci örnek aşağıdaki hatayı veriyor: Adjacent XJS elements must be wrapped in an enclosing tag while parsing file.

İki kardeş öğesini bir <div>veya benzer bir şeye sarmadan nasıl render edebilirim ?

Bu şu anda bir sınırlamadır, ancak muhtemelen gelecekte bir noktada düzeltilecektir ( github deposunda bazı açık sorunlar vardır ).

Şimdilik, bir dizi döndüren bir işlev kullanabilirsiniz (bu temelde durumsuz bir bileşendir):

function things(arg, onWhatever){
    return [
        <tr><td>Item 1</td></tr>,
        <tr><td>Item 2</td></tr>
    ];
}

Ve bunu bileşeninizde kullanın.

return (
    <table><tbody>
      {things(arg1, this.handleWhatever)}
      {things(arg2, this.handleWhatever)}
    </tbody></table>
);

Güncelleme

React 16'da render'dan bir dizi döndürebileceksiniz.

Başka Bir Güncelleme

Artık üst düzey bir dizi döndürebilir veya kullanabilirsiniz <React.Fragment>.

React, dinamik olarak oluşturulan bir liste yerine iki öğenin sabit olduğunu bilmediğinden, bir dizi ile her öğeye bir anahtar yerleştirmemiz gerekir:

function RowPair() {
  return [
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]
}

İle React.Fragment, çocukları dinamik olarak inşa etmiyorsak, a'nın gerekli olmadığı bir <div>veya benzerine sarmak gibi çok daha fazla davranır key. İlk olarak, diziyi bir Parçaya sarabiliriz:

function RowPair() {
  return <React.Fragment>{[
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]}</React.Fragment>
}

Ve sonra diziyi keytamamen ortadan kaldırabiliriz :

function RowPair() {
  return <React.Fragment>
    <tr><td>First</td></tr>
    <tr><td>Second</td></tr>
  </React.Fragment>
}

Bunun eski bir gönderi olduğunu biliyorum, ancak cevabım benim gibi yeni başlayanlar için bir yardımcı olabilir.

React 16.2'de Fragments için geliştirilmiş destek eklendi.

Şimdi bunu şu şekilde iade edebilirsiniz:

return (
  <>
    <tr><td>Item 1</td></tr>
    <tr><td>Item 2</td></tr>
  </>
);

Sen ile sarın <></>veya <Fragment></Fragment>.

Bazı öznitelikleri geçirmek isterseniz , yazma sırasında yalnızca anahtar desteklenir <Fragment />ve kısa sözdizimi <></>öznitelikleri kabul etmediği için kullanmanız gerekir .

Not: Kısa sözdizimini kullanacaksanız, Babel 7 kullandığınızdan emin olun .

Kaynak Referans

Woohoo! React ekibi sonunda bu özelliği ekledi. React v16.0'dan itibaren şunları yapabilirsiniz:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
      <tr key="a"><td>Item 1</td></tr>,
      <tr key="b"><td>Item 2</td></tr>
  ];
}

Bkz burada: "parçalarını ve dizeleri Yeni dönüş türlerini işlemek" açıklayan tam blog yazısı .

Bir üst öğeye sahip olmak çoğu durumda yararlıdır, örneğin, alt öğe stilini ve birkaç başka senaryoyu hedefleyebilen bir ebeveyn className'e sahip olabilirsiniz ...

Ancak bunu gerçekten yapmak istemiyorsanız, React.Fragment

Öyleyse basitçe şöyle bir şey yapın:

<React.Fragment>
  <First />
  <Second />
  <Third />
</React.Fragment>

16.2 sürümünden itibaren <>, render işlevinde aşağıdaki gibi görünen kısaltılmış bir sürüm de bulunmaktadır:

render() {
  return (
    <>
      <First />
      <Second />
      <Third />
    </>
  );
}

Ayrıca, sürüm 16.0 ve üstü kullanıyorsanız, aşağıdaki gibi üst sarmalayıcıya ihtiyaç duymayan öğeler dizisi döndürebilirsiniz:

render() {
 return [
  <h1 key="heading">Hello from Alireza!</h1>,
  <p key="first">Here where I'm!</p>,
  <p key="second">And again here :)</p>
 ];
}

Parantez içine şu şekilde sarabilirsiniz:

React.createClass({
    render: function() {
        return (
          [
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
          ]
        );
    }
});

Bu örnek benim için iyi çalışıyor:

let values = [];

if (props.Values){
  values = [
    <tr key={1}>
      <td>props.Values[0].SomeValue</td>
    </tr>
  ,
    <tr key={2}>
        <td>props.Values[1].SomeValue</td>
        </tr>
    ];
}

return (
    <table className="no-border-table table">
      <tbody>
        <tr>
            <th>Some text</th>
        </tr>
        {values}
      </tbody>
    </table>
)

Bu sözdizimi gibi bir şey benim için çalıştı

this.props.map((data,index)=>{return( [ <tr>....</tr>,<tr>....</tr>];)});

TypeScript kullananlar için doğru sözdizimi şudur:

return [
  (
    <div>Foo</div>
  ),
  (
    <div>Bar</div>
  )
];