Як зробити віртуальні елементи, не обертаючи їх батьківським тегом?

У більшості випадків наявність батьківського тегу не є проблемою.

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

Але є деякі випадки, коли має сенс мати елементи односемейного зв'язку в одній функції візуалізації без батьківського елемента, і особливо у випадку таблиці, ви не хочете обертати рядок таблиці в div.

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

Другий приклад дає наступне повідомлення про помилку: Adjacent XJS elements must be wrapped in an enclosing tag while parsing file.

Як я можу відтворити два елементи брата або сестри, не загортаючи їх у <div>чи щось подібне?

Наразі це обмеження, але, ймовірно, це буде виправлено в якийсь момент у майбутньому ( у репозиторії github є деякі відкриті проблеми ).

Наразі ви можете використовувати функцію, яка повертає масив (це в основному компонент без стану):

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

І використовуйте це у своєму компоненті.

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

Оновлення

У React 16 ви зможете повернути масив із візуалізації.

Ще одне оновлення

Тепер ви можете або повернути масив верхнього рівня, або використовувати <React.Fragment>.

За допомогою масиву нам потрібно розмістити ключ на кожному елементі, оскільки React не знає, що два елементи є постійними, замість динамічно створеного списку:

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

З React.Fragment, він поводиться набагато більше, як обгортання його в <div>або подібне, де a keyне потрібно, якщо ми не будуємо дітей динамічно. Спочатку ми можемо обернути масив у фрагмент:

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

І тоді ми можемо повністю усунути масив і keys:

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

Я знаю, що це старий допис, але, можливо, моя відповідь може допомогти новачкам, як я.

У React 16.2 була додана покращена підтримка фрагментів .

Тепер ви можете повернути його так:

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

Ви можете обернути його за допомогою <></>або <Fragment></Fragment>.

Якщо ви хочете передати деякі атрибути, під час написання підтримується лише ключ , і вам доведеться використовувати, <Fragment />оскільки короткий синтаксис<></> не приймає атрибути.

Примітка: Якщо ви збираєтеся використовувати короткий синтаксис, переконайтеся, що ви використовуєте Babel 7 .

Посилання на джерело

Вуху! Команда React нарешті додала цю функцію. Починаючи з React v16.0, ви можете робити:

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>
  ];
}

Дивіться повну публікацію в блозі, де пояснюється "Нові типи повернення рендеринга: фрагменти та рядки" тут .

Наявність батьківського елемента корисно в більшості випадків, наприклад, у вас може бути батьківський класName, який може орієнтуватись на стиль дочірніх елементів та кілька інших сценаріїв ...

Але, якщо ви дійсно не хочете цього робити, можете скористатися React.Fragment

Тому просто зробіть щось подібне:

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

З версії 16.2 існує також скорочена версія <>, яка також виглядає так у функції рендерингу:

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

Крім того, якщо використовується версія 16.0 і вище, ви можете повернути масив елементів, яким не потрібна батьківська обгортка, як показано нижче:

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

Ви можете обернути його в дужки так:

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

Цей приклад добре працює для мене:

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>
)

Щось на зразок цього синтаксису спрацювало для мене

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

Для тих, хто використовує TypeScript, правильний синтаксис:

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