在 gatsby 中显示具有布尔值的组件

Question

我有这个警告组件，我希望它仅在我从降价 post 文件（在 frontmatter 字段中）传递真值时显示。

import React from 'react'
import { Toast, ToastBody } from 'react-bootstrap'

function alerts({children, alert}){
    
    return (
            <div>
                <Toast className={alert}>
                    <ToastBody>
                        <main>{children}</main>
                    </ToastBody>
                </Toast>           
            </div>
    )
}

alert.defaultProps = {
   alert: "alert-yellow" 
};

export default alerts

显示在我的单个 post 文件中

import React from 'react'
import Alert from './alerts'

const home = () => {
    return (
    <Alert [HERE I NEED SOMETHING TO MAKE IT VISIBLE] alert="alert-red">
                <h1>bla bla</h1>
                <p>blabla</p>
            </Alert>
            <div>
            blablabla
            </div>
  )          
}
export default home

有什么办法吗？

Answer 1

<div>{condition && <Alert>Warning</Alert>}</div>

// OR in alert component definition 

function Alert({cond}) {
  if (cond) return <div>Alert</div>
  else return null
}

在 gatsby 中显示具有布尔值的组件

Show component with boolean value in gatsby

javascript

boolean

reactjs