Реакция: рендеринг соседнего JSX

Как и зачем рендерить смежные элементы JSX.

В ReactJS, когда вы визуализируете свои элементы JSX, они должны быть дочерними элементами одного элемента. Это означает, что мы не можем отображать смежные элементы JSX, если они не имеют общего родителя.

Вот пример. Важно отметить, что наши components и элемент ‹h1› заключены в ‹div›

render() {
  return (
    <div>
      <MyComponent/>
      <h1> Header Element </h1>
      <MyComponent2/>
    <div>
  );
}

Если мы удалим родительский элемент ‹div›, React выдаст эту ошибку:

Ошибка синтаксического анализа: смежные элементы JSX должны быть заключены в закрывающий тег.

Почему:

React.createElement(element, {…props}, […children]);

Когда вы визуализируете элемент заголовка JSX, вы говорите React создать новый элемент с помощью метода createElement(). В Javascript вы не можете возвращать несколько вызовов методов, подобных этому. Яэто просто неправильно…

return (
    React.createElement(MyComponent, [], []);
    React.createElement('h1', [], 'Your Header Text Here');
    React.createElement(MyComponent2, [], []);
);
// But you can do this:
return (
  React.createElement('div', [],[
    React.createElement(MyComponent, [], []),
    React.createElement('h1', [], 'Your Header Text Here'),
    React.createElement(MyComponent2, [], [])
  ])
);

Неисправности:

Однако есть проблемы, с которыми вы можете столкнуться при этой настройке, и Документация React дает довольно хороший пример. Ниже представлен компонент таблицы, который возвращает ‹table› с дочерними элементами: ‹tr›, и компонент ‹Columns/›. У нас также есть компонент Columns, который возвращает наши ‹td›, обернутые внутри родительского элемента.

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}
class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

Вот что будет отображать html при размещении на экране:

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Наш стол РАЗРУШЕН, в следующий раз используйте подставку! Этот обязательный родительский элемент ‹div/› нарушит способ отображения данных нашей таблицы.

Решения:

Возвращает массив элементов JSX. React знает, как с этим справиться, и будет отображать ваши элементы без родительского элемента. Примечание. Вы можете сопоставить некоторые данные с массивом элементов JSX.

return (
  [
    <td>Hello</td>
    <td>World</td>
  ]
);

2. React Fragments, новое в версии 16.2. React теперь поставляется с пользовательским компонентом, в который вы можете обернуть свои элементы JSX, а затем отобразить их без фактического родителя в DOM.

import React from 'react';
   ...
return (
  <React.Fragment>
    <td>Hello</td>
    <td>World</td>
  </React.Fragment>
)

3. Фрагмент короткой руки (16.2+)

return (
  <>
    <td>Hello</td>
    <td>World</td>
  </>
)

4. «Компонент более высокого порядка». Создайте еще один компонент, который будет принимать ваши элементы JSX в качестве дочерних элементов и возвращать их напрямую с помощью props.children. Вы также можете добавить другие функции в свой HOC, если хотите.

// wrapper.js
const wrapper = (props) => props.children;
export default wrapper
//app.js
import Wrapper from './wrapper.js'
 ...
return (
  <Wrapper>
    <td>Hello</td>
    <td>World</td>
  </Wrapper>
)

Я пишу эти сообщения в блоге, чтобы помочь лучше понять вещи самому, а затем, надеюсь, помочь кому-то еще. При этом: дайте мне знать, как бы вы это использовали, или, если я сказал что-то глупое, я здесь, чтобы учиться. :)

Реакция: рендеринг соседнего JSX