将参数传递给React组件

时间:2020-05-07 13:17:35

标签: reactjs gatsby

请考虑以下组件。

import React from "react"

const AlertBox = ({ type, content }) => {
    if (type === "tip") {
        return (
            <div className="alert is-tip">
                <p className="alert-title">Tip</p>
                <p>{content}</p>
            </div>
        )
    }

    if (type === "important") {
        return (
            <div className="alert is-important">
                <p className="alert-title">Important</p>
                <p>{content}</p>
            </div>
        )
    }
}

export default AlertBox

这使我(通过使用gatsby-plugin-mdx)可以像这样使用它:

<AlertBox type="important" content="This is my very important note" />

很好。但是我真正想要的是这样使用它:

<AlertBox type="important">
    This is my very important note
</AlertBox>

如何将其传递给组件?

0 个答案:

没有答案