Як уникнути додаткового загортання <div> в React?

113

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

У мене є html:

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

Функція візуалізації така:

...
render: function() {

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

А нижче я закликаю рендерінг:

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

Створений HTML виглядає приблизно так:

<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 змушує мене загортати все в div "DeadSimpleComponent". Який найкращий і простий спосіб вирішити це без чітких маніпуляцій DOM?

ОНОВЛЕННЯ 28.07.2017: Підтримка React додала таку можливість у React 16 Beta 1

З React 16.2 ви можете це зробити:

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

javascript reactjs

— Кирило Резніков
джерело

4

ідеальна практика іменування ;-)

— Кирило Резніков

Чи можу я побачити ваш HTML-файл? Я неправильно прочитав ваше запитання. У мене, можливо, є вирішення проблеми.

— Луї93

Щось

— Кирило Резніков

У вас проблема з компонентом, що має один елемент? Дійсно?

— Домінік

Що ви маєте на увазі? Я просто намагаюся реагувати, це не повинно бути дуже складним .. Але обмеження виглядає прикро.

— Кирило Резніков

142

Цю вимогу було видалено у версії React (16.0)] 1 , тому тепер ви можете уникнути цієї обгортки.

Ви можете використовувати React.Fragment для візуалізації списку елементів без створення батьківського вузла, офіційний приклад:

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

Детальніше тут: Фрагменти

— Лугер
джерело

1

Чудові новини ДмитроУльянець. Чи є запланована дата випуску?

— Йонас Карлбаум

Він виходить з 26 вересня 2017 року, дивіться reakctjs.org/blog/2017/09/26/react-v16.0.html

— Том

56

Оновлення 2017-12-05: React v16.2.0 тепер повністю підтримує візуалізацію фрагментів з покращеною підтримкою для повернення декількох дітей з методу візуалізації компонентів без вказівки ключів у дітей:

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

Якщо ви використовуєте версію React до версії v16.2.0, її також можна використовувати <React.Fragment>...</React.Fragment>:

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

Оригінал:

React v16.0 представив повернення масиву елементів у методі візуалізації без загортання у діві: 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>,
  ];
}

Наразі для кожного елемента необхідний ключ, щоб уникнути попередження ключа, але це може бути змінено у майбутніх випусках:

В майбутньому ми, швидше за все, додамо в JSX спеціальний синтаксис фрагмента, який не потребує ключів.

— Том
джерело

Новий скорочений синтаксис <> </> чудовий. У мене все ще багато змішаних почуттів щодо цього.

— Тулані Чівандіква

@ThulaniChivandikwa Ви б не хотіли висловити свої сумніви щодо короткого синтаксису?

— Том

1

Я думаю, що мова йде більше про те, щоб концепція порожнього тегу була непарною в JSX і не була дуже інтуїтивно зрозумілою, якщо ви точно не знаєте, що це робить.

— Тулані Чівандіква

7

Ви можете використовувати:

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

Детальнішу інформацію див. У цій документації .

— Роландо Сінтрон
джерело

3

Використовуйте [], а не (), щоб обернути всю віддачу.

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

— Майкл Кунео
джерело

2

Я створив компонент, щоб обернути дочірні компоненти без DIV. Це називається тіньовою обгорткою: https://www.npmjs.com/package/react-shadow-wrapper

— Метт Ландерс
джерело

Я розмістив проблему на вашому пакеті, чи можете ви подивіться? Спасибі

— Antoni4

1

Це все-таки потрібно , АЛЕ Реагуйте зараз, переконайтеся, що створюйте елементи без створення додаткового елемента DOM.

Додаткове обгортання необхідне (як правило, для батьків div), оскільки для createElementметоду Reacts потрібен typeпараметр, який є either a tag name string (such as 'div' or 'span'), a React component type (a class or a function). Але це було до того, як вони запровадили React Fragment.

Перегляньте цей НОВИЙ api-документ для createElement

React.createElement : Створіть і поверніть новий елемент React заданого типу. Аргументом типу може бути або рядок імені тега (наприклад, 'div' або 'span'), тип компонента React (клас або функція), або тип фрагмента React .

ось офіційний приклад, Посилайтеся на React.Fragment .

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

— прем'єр
джерело

0

Ви не зможете позбутися цього divелемента. React.render () повинен повернути один дійсний вузол DOM.

— Генрік Андерссон
джерело

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

— Кріс Хоукс

16

@ChrisHawkes, не згоден. Один обгортковий дів впливає на селектори css.

— Downhillski

Під час роботи з семантичними елементами, які не хочуть бути повністю компонентами React, це стає проблемою. Скажімо, є тег розділу з елементами заголовка та нижнього колонтитулу, а між ними є контейнер google map, який ми не хочемо використовувати в React. Тоді було б непогано мати заголовок як компонент React, а Footer як компонент React, не включаючи додаткові div: s на внутрішні компоненти React ... Це звичайний дурний дизайн, якщо ви взагалі переймаєтесь html Ви

— виходите

0

Ось один із способів надання "транскулентних" компонентів:

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>

— Ярослав Рахматуллін
джерело

0

Існує також обхід. Наведений нижче блок код генерує фрагмент без необхідності React.Fragment.

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
джерело

0

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

Крім того, якщо ви хочете розважитися, ви можете реалізувати (і дізнатися багато речей) Реактивний режим, який видаляє зайві діви, і для цього я дійсно хочу поділитися чудовим відео про те, як ви можете це зробити на самій базі коду реакції.

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

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

— Габріель П.
джерело