Реагируйте на форматирование компонента - div не закрывается

Question

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

    const productsToDisplay = this.props.shopData.shop.products
    return (
      <div classname="App">
        <div classname="products-grid">
          {productsToDisplay.edges.map((el, i)=> {
            return(
              <product key="{i}" product="{el.node}">
            )
          })}
        </product>
        </div>
      </div>
    );
  }
}

Два div под закрывающим тегом product не распознаются вышеуказанными div, так как первый заявляет, что он не закрыт.

Я полагаю, что это связано с тем, что в выражении return и нет, но мне неясно, как это должно быть отформатировано.

Ссылка: http://www.codeshopify.com/blog_posts/building-a-store-with-react-step-2

ошибка: ошибка синтаксического анализа: смежные элементы JSX должны быть заключены в тег.Вы хотели фрагмент JSX <> ...?

Любая помощь приветствуется!

Answer 1

Есть две проблемы. Учебник импортирует продукт следующим образом:

import Product from './Product.js';

, но затем учебник ссылается на него позже как <product, когда оно должно быть <Product.

Вторая проблема заключается в том, что закрывающий тег Product </product> должен быть либо внутри оператора возврата вместе с открытым тегом Product, либо просто использовать самозакрывающийся тег, подобный этому:

{productsToDisplay.edges.map((el, i)=> {
    return(
        <Product key="{i}" product="{el.node}" />
    ) 
})}

Итак, ваше полное выражение возврата должно выглядеть так:

return (
  <div classname="App">
    <div classname="products-grid">
      {productsToDisplay.edges.map((el, i)=> {
        return(
          <Product key="{i}" product="{el.node}" />
        )
      })}
    </div>
  </div>
);

---

Кредиты @RyanCogswell для уведомления о другой проблеме с заглавной буквой P в <products>.