REACT: рендеринг динамического списка без массива

FelipeFa

8 августа 2021 в 23:48

Чего я пытаюсь достичь с помощью этого вопроса, так это не передавать тег <li> в компонент App.js. Единственное решение, которое я нашел в документации REACT, — это использовать массив и сопоставить его с тегом <li>. Дело в том, что делать это таким образом не так чисто.

App.js

const App = () => {
  <Component>
    <li>
      <Link> Item 1 </Link>
    </li>
    <li>
      <Link> Item 2 </Link>
    </li>
    <li>
      <Link> Item 3 </Link>
    </li>
  </Component>
}

Component.js

const Component = ({children}) => {
  return(
    <ul>{children}</ul>
  )
}

Изменить: Мои компоненты загромождены ненужными тегами.

Источник

Поделиться Скопировать ссылку Скопировано

Peter B

8 августа 2021 в 23:52

Разве App.js не должно начинаться с const App =? (дважды)

Drew Reese

8 августа 2021 в 23:53

Я думаю, вам нужно предоставить более четкий пример того, что вы хотите. Я не думаю, что вообще понятно, о чем вы просите. Если вы визуализируете неупорядоченный список, вам нужно будет отобразить элемент списка (li) как дочерний элемент, после чего вы сможете отобразить оттуда любой дочерний элемент/компонент.

silencedogood

8 августа 2021 в 23:55

соглашусь не понятно. При этом вы можете рассмотреть фрагмент реакции <>stuff</>

Ответы (1)

Peter B

8 августа 2021 в 23:57

Вы можете использовать React.Children.map, чтобы добавить <li> к каждому из дочерних элементов, вместо того, чтобы возлагать на каждого дочернего элемента ответственность делать это самостоятельно:

const App = () => {
  <Component>
    <Item />
    <Item />
  </Component>
}

const Component = ({children}) => {
  return(
    <ul>
      {React.Children.map(children, (child, i) => <li key={i}>{child}</li>)}
    </ul>
  )
}

Поделиться Скопировать ссылку Скопировано

Drew Reese

9 августа 2021 в 00:03

Свойство children не является массивом, поэтому вы не можете просто отображать его таким образом.

FelipeFa

9 августа 2021 в 01:52

Комментарий @DrewReese правильный. Тем не менее, существует обходной путь для преобразования детского реквизита в массив. React.Children.map(children, (...))

Peter B

9 августа 2021 в 09:40

Ах, вы оба правы, было поздно... теперь исправлено.