Question

我在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不会编译。

Answer 1

您不能在这样的大括号表达式内直接使用if运算符。尝试将语法更改为：

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

文档中的更多示例：https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

GatsbyJs在编译时返回意外的令牌“ if”

1 个答案: