Javascript GatsbyJs返回意外的令牌；如果；编译时

我在gatsbyJs中有一个简单的代码，它从静态查询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>

        )
     ))}
     />
)

从“React”导入React
从“gatsby”导入{Link，StaticQuery，graphql}
导出默认值（）=>(
(
data.contentful.products.map（（产品）=>(
{product.product.name}
{if（product.product.trister！==null）{
{product.product.triser.triser}

} 
{console.log（产品）}
)
))}
/>
)

---

当我删除if块时，代码运行良好，但是if无法编译。

在这样的花括号表达式中不能使用

if

操作符。尝试将语法更改为：

{product.product.teaser !== null && (
    <p>{product.product.teaser.teaser}</p>
)}

{product.product.trister！==null&&(
{product.product.triser.triser}

)}

文档中的更多示例：

可能重复的