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

avatar
FelipeFa
8 августа 2021 в 23:48
55
1
0

Чего я пытаюсь достичь с помощью этого вопроса, так это не передавать тег <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
1

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

Drew Reese
8 августа 2021 в 23:53
1

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

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

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

Ответы (1)

avatar
Peter B
8 августа 2021 в 23:57
1

Вы можете использовать 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
0

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

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

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

Peter B
9 августа 2021 в 09:40
0

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