reactjs - 组件的 Gatsby 条件渲染

Question

这个问题在这里已经有了答案:





Use if statement in React JSX

(3 个回答)


去年关闭。




我有一个这样的模板:

const Template = ({ data }) => {
  const { id } = data.Page
  const postNode = data.Page

  return (
    <Layout>
       // conditional logic here
       // if {id} is 40 output <AdditionalContent />
    </Layout>
  )
}

我想知道是否可以检查 id看是不是40，然后输出 <AdditionalContent>成分。

Answer 1

你可以这样定义

const Template = ({ data }) => {
  const { id } = data.Page
  const postNode = data.Page

  return (
    <Layout>
      {id===40 && <AdditionalContent />}
    </Layout>
  )
}