Передача параметров в реагирующий компонент

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