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。{p>

第二个问题是，<Product结束标记 Product 应该与返回</product>标记一起放在return语句中，或者仅使用self -像这样关闭标签：

Product

因此，完整的return语句应如下所示：

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

感谢@RyanCogswell注意到return ( <div classname="App"> <div classname="products-grid"> {productsToDisplay.edges.map((el, i)=> { return( <Product key="{i}" product="{el.node}" /> ) })} </div> </div> );中大写P的另一个问题。

React组件格式-div不关闭

1 个答案: