Как я могу визуализировать одноуровневые элементы без обертывания их в родительский тег?

в большинстве случаев наличие родительского тега не является проблемой. 

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

но есть некоторые случаи, когда имеет смысл элементов в функции render без родителей, и особенно в случае таблицы, вы не хотите, чтобы обернуть строку таблицы в 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> или что-то подобное?

7 72
reactjs

7 ответов:

это ограничение в настоящее время, но, вероятно, будет исправлено в какой-то момент в будущем (есть некоторые открытые вопросы по РЕПО 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 вы сможете вернуть массив из render.

54

Я знаю, что это был старый пост, но, возможно, мой ответ может помочь новичкам, таким как я.

в React 16.2, улучшена поддержка фрагментов.

теперь вы можете вернуть ее так:

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

вы можете обернуть его с <></> или <Fragment></Fragment>.

если вы хотите передать некоторые атрибуты, только ключ поддерживается на момент написания статьи, и вам придется использовать <Fragment /> так как короткий синтаксис <></> не принимает атрибуты.

Примечание: Если вы собираетесь использовать короткий синтаксис убедитесь, что вы используете Вавилон 7.

Ссылка На Источник

18

Ура! Команда 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>
  ];
}

посмотреть полный пост в блоге, объясняющий "новые типы возврата рендеринга: фрагменты и строки" здесь.

13

вы можете обернуть его в квадратные скобки, например:

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

этот пример хорошо работает для меня:

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

что-то вроде этого синтаксиса работало для меня

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

для тех, кто использует TypeScript, правильный синтаксис:

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