React入門8-複合組件

1. 匿名插槽 ---> 類似於 vue 中的v-slot

function Dialog(props) {
    return <div style={{ border: "1px solid blue" }}>{props.children}</div>
}
export default function Composition() {
    return (
        <div>
            <Dialog>
                <h1>組件複合</h1>
                <p>複合組件給與你足夠的敏捷去定義自定義組件的外觀和行爲</p>
            </Dialog>
        </div>
    )
}

2. 具名插槽-----> 類似於vue 中的v-slot:footer

function Dialog(props) {
    return <div style={{ border: "1px solid blue" }}>
        {props.children.default}
        <div>
            {props.children.footer}
        </div>
    </div>
}
export default function Composition() {
    return (
        <div>
            <Dialog>
                {{
                    default: (
                        <frameElement>
                            <h1>組件複合</h1>
                            <p>複合組件給與你足夠的敏捷去定義自定義組件的外觀和行爲</p>
                        </frameElement>
                    ),
                    footer: (
                        <>
                            <button onClick={() => alert("react確實好")}>確定</button>
                        </>
                    )
                }}
            </Dialog>
        </div>
    )
}

3. 作用域插槽----> 類似於vue 中的v-slot:footer="ctx"

function Dialog(props) {
    // 備選消息
    const messages = {
        "foo": {title: 'foo', content: 'foo11111~'},
        "bar": {title: 'bar', content: 'bar~'},
    }
    // 執行函數獲得要顯示的內容
    const {body, footer} = props.children(messages[props.msg]); 

    return <div style={{ border: "1px solid blue" }}>
        {body}
        <div>
            {footer}
        </div>
    </div>
}
export default function Composition() {
    return (
        <div>
            {/* 執行顯示消息的key */}
            <Dialog msg="foo">
                {({title, content}) => ({
                        body: (
                            <>
                            <h1>{title}</h1>
                            <p>{content}</p>
                        </>
                    ),
                    footer: <button onClick={() => alert("react確實好")}>確定</button>
                })}
            </Dialog>
        </div>
    )
}