GatsbyJs在编译时返回意外的标记"if“
GatsbyJs在编译时返回意外的标记"if“
提问于 2018-12-06 04:26:37
我在gatsbyJs中有一段简单的代码，它从一个Staticquery ingraphql获取数据并呈现一个组件。我需要在render函数中检查数据对象中是否存在一个子对象，并添加一个
包含数据的html块(如果子对象存在)。
代码如下：
import React from 'react'
import { Link, StaticQuery, graphql } from 'gatsby'
export default () =>(
<StaticQuery
query={graphql`
query ProductQuery {
contentful: allContentfulProduct {
products: edges {
product: node {
id
name
teaser {
teaser
}
}
}
}}
`}
render={data => (
data.contentful.products.map((product) => (
<div className="col-md-4 inline">
<h1>{product.product.name}</h1>
{if (product.product.teaser !==null){
<p>{product.product.teaser.teaser}</p>
}
{ console.log(product)}
</div>
)
))}
/>
)当我删除if块时，代码运行得很好，但是if不能编译。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-06 04:32:19
您不能在这样的花括号表达式中使用内联if运算符。尝试将语法更改为：
{product.product.teaser !== null && (
<p>{product.product.teaser.teaser}</p>
)}文档中有更多示例：https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53640206
复制相关文章
相似问题