React 组件格式 - 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 无法被上述 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> 应该与开始 [=] 一起在 return 语句中15=] 标签或只使用像这样的自闭合标签：

{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 的另一个问题。

React 组件格式 - div 未关闭

React component formatting - div not closing

html

apollo

reactjs