将参数传递给react组件

Question

考虑以下组件。

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>

我该如何将其传递给组件？

Answer 1

你可以使用儿童道具。

import React from "react"

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

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

    export default AlertBox