Как правильно вставить jsx со встроенными переменными js в массив

Question

Я новичок, чтобы реагировать, и я немного запутался.У меня есть компонент с именем CardList.js, который отображает список карт.Он дает компоненту Card.js, что у меня есть объект с именем card, а Card.js считывает объект и отображает пары ключ-значение, которые он находит в неупорядоченном списке.Я хочу, чтобы Card.js возвращал массив элементов списка со значениями js внутри тегов li.

Кажется, я не могу понять это правильно, поэтому должны быть некоторые детали, которые я еще не понимаю.Могу ли я даже сделать то, что я пытаюсь, и это просто незначительная опечатка, или я неправильно понимаю и делаю это совершенно неправильно?

Я пробовал отладчик, Google и переполнение стека, но мне не удалось найти пример, подобный моему, где он помещает комбинацию jsx и js в массив

В настоящее времяпоявляется сообщение об ошибке «Ошибка синтаксического анализа: неожиданный токен, ожидаемый«} », и оно указывает на конечную точку с запятой в выражении cardJsx.push внутри цикла for Card.js, но я думаю, что проблема заключается не только в этом.

CardList.js

import Card from './Card';

debugger;
const CardList = ({cardList}) => <div>{cardList.map((card, i) => <Card id={i} card={card} />)}</div>;
export default CardList;

Card.js

const Card = ({id, card}) => {
    debugger;
    const cardJsx = [<ul class="list-group">];
    for (const [key, value] of Object.entries(card)) {
        cardJsx.push(<li className="list-group-item">{key}: {value} </li>); // semicolon is where error message points to
    }
    cardJsx.push(</ul>);
    return <div>{cardJsx}</div>;
}

export default Card;

Answer 1

Каждый раз, когда вы итерируете cardList, используя map, ваш Card компонент генерирует новый набор элемента <ul><li>...</li></ul>, что неверно. у вас должен быть только один родительский элемент <ul></ul>, а в компоненте Card может быть несколько элементов <li>...</li>.

Вы можете попробовать это,

const CardList = ({cardList}) => (
  <div>
    <ul className="list-group"> //Add `ul` element here only
      {cardList.map((card, i) => (
        <Card id={i} card={card} />
      ))}
    </ul>
  </div>
)

И ваш Card компонент должен быть,

const Card = ({id, card}) => {
  debugger
  const cardJsx = []
  for (const [key, value] of Object.entries(card)) {
    cardJsx.push(
      <li className="list-group-item" key={id}>
        {key}:{value}
      </li>
    )
  }
  return <>{cardJsx}</> //Don't use `div` here instead you can use `Fragments`
}

export default Card

Упрощенный Демо .

См. Фрагменты .

Обновление

Согласно этому требованию,

Карта должна вернуться, потому что вызывающий ее Cardlist создает список списков, поэтому Card должен возвращать один список каждый раз, когда CardList вызывает его.

Вы можете сделать это,

const CardList = ({cardList}) => (
  <div>
      {cardList.map((card, i) => (
        <Card id={i} card={card} />
      ))}
  </div>
)

А Card Компонент,

const Card = ({id, card}) => {
  debugger
  const cardJsx = []
  for (const [key, value] of Object.entries(card)) {
    cardJsx.push(
      <li className="list-group-item" key={id}>
        {key}:{value}
      </li>
    )
  }
  return (
    <>
      <ul className="list-group">{cardJsx}</ul> //You need to add your parent `ul` tag here
    </>
  )
}

export default Card

Answer 2

Проблема в том, что вы добавляете различные типы компонентов на cardJsx.Вы можете создать массив элементов, но они должны быть одинаковыми.Вы можете видеть, что здесь .