reactjs - 在 gatsby jsx 中添加 `if` 条件

Question

在某些情况下，我想在 gatsby 模板文件中添加元素。

我正在使用 gatsby 开发文档站点，该文档由 Markdown 文件制作。
这是 md 文件和 gatsby 模板。如果文档有 如何添加元素固定=真健康)状况？？

Markdown

---
title: "doc title"
date: "2020-06-01"
tags: ["some","tags"]
pinned: TRUE
---

document body.

模板文件

import React from "react"
import { graphql } from "gatsby"

export default class DocsList extends React.Component {
  render() {
    const posts = this.props.data.allMarkdownRemark.edges
    return (
    <div>
      {posts.map(({ node }) => {
        const title = node.frontmatter.title || node.fields.slug
        const tags = node.frontmatter.tags || node.fields.slug
        const ispinned = node.frontmatter.pinned || node.fields.slug
        return(
        <p>{title}</p>
        <p>{(tags || []).map(tags => (<span className="tags" key={tags}><FaHashtag />{tags}</span>))}</p>

        // if the document has `pinned=true` attribute, show <span> tag below
        <p>{if {ispinned===true ? `<span>This is PINNED item</span>` }}</p>
        )
        })}
    </div>
        )
    }
}

export const query = graphql`
query docssListQuery($skip: Int!, $limit: Int!) {
  allMarkdownRemark(
    filter: {
      fields: { collection: { eq: "manuals" } }
      frontmatter: { published: { ne: false } }
    }
    sort: { fields: [frontmatter___date], order: DESC }
    limit: $limit
    skip: $skip
  ) {
    edges {
      node {
        id
        fields {
          slug
        }
        frontmatter {
          title
          date
          tags
          pinned
        }
        excerpt
        timeToRead
      }
    }
  }
}
`;

Answer 1

 <p>{isPinned && <span>This is PINNED item</span>}</p>

如 isPinned计算结果为 true ，以及自 <span />是真的，那么整个表达式的值就是这个 span ，因此您想要的结果。