反应组件格式 - div没有关闭答案

【问题标题】：React component formatting - div not closing反应组件格式 - div没有关闭
【发布时间】：2019-06-13 16:57:45
【问题描述】：

抱歉，如果这是直截了当的。我正在关注教程，似乎存在语法错误。我无法为以下内容找到正确的格式：

    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 不被上述 div 识别，因为第一个表示它未关闭。

我相信这是由于在 return 声明中，并且不在其中 - 但我不清楚这应该如何格式化。

参考：http://www.codeshopify.com/blog_posts/building-a-store-with-react-step-2

错误：解析错误：相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 ...？

感谢任何帮助！

【问题讨论】：

除了 Andrew 指出的那个之外，该教程中还有其他语法错误（例如，<product... 应该是 <Product...。您可能需要寻找一个已经更仔细地组合在一起的教程。
是的，我正在努力学习。谢谢
实际上解决了我的另一个问题！哈哈。天哪。
@RyanCogswell 我可以将其添加到我的答案中，还是您更愿意自己将其作为答案发布，以便我可以 +1 并更新我的答案。干杯。
我正在编辑您的答案以包含它。

标签： html reactjs apollo

【解决方案1】：

有两个问题。本教程导入产品如下：

import Product from './Product.js';

但是教程稍后将其引用为<product，而它应该是<Product。

第二个问题是结束 Product 标记 </product> 应该与打开的 Product 标记一起在 return 语句中，或者只使用这样的自结束标记：

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

所以你的完整的return语句应该是这样的：

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

感谢@RyanCogswell 注意到<products> 中大写P 的另一个问题。

【讨论】：

谢谢，我试过了，由于数据没有出现，我想我错了。注意到它必须是另一个问题。谢谢，我会接受的。
这很奇怪。您能否在您的const productsToDisplay = this.props.shopData.shop.products 行下方添加此行：console.log(productsToDisplay);，然后将控制台中记录的内容复制粘贴到此处。