Svelte项目调用Modal时黑屏无响应及组件调用方式咨询

1. Modal弹窗异常：点击后黑屏无法操作 #

在Svelte项目中实现了可动态调整尺寸的网格按钮，点击按钮打开Dialog/Modal时，屏幕直接变黑，完全无法进行任何操作，只能关闭页面重启。

2. 父组件调用子组件的最优实现方式 #

目前通过数组传递组件的方式创建子组件，不确定这种方案是否为最优解，想咨询更合适的实现方式。

main_app.svelte #

<script>
    import SwContainer from './swContainer.svelte';
    import SwButtonIten from './swButtonIten.svelte';
    import SwDialogIten from './swDialogIten.svelte';

    let componentPositions = [
        { 
            component: SwButtonIten,
            props: { cstmLabel: 'Open Dialog 1', handleClick: openDialog1 },
            rowPos: 0,
            colPos: 0
        },
        { 
            component: SwButtonIten,
            props: { cstmLabel: 'Open Dialog 2' },
            rowPos: 0,
            colPos: 1
        }
    ];

    let dialog1IsOpen = false;
    let dialog2IsOpen = false;

    function openDialog1() {
        dialog1IsOpen = true;
    }

    function openDialog2() {
        dialog2IsOpen = true;
    }
</script>

<svelte:head>
    <title>About</title>
    <meta name="description" content="About this app" />
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    />
</svelte:head>

<SwContainer numRow={2} numCol={2} {componentPositions}></SwContainer>

<SwDialogIten bind:isOpen={dialog1IsOpen} title="Dialog_1" message="etc, etc, etc" />
<SwDialogIten bind:isOpen={dialog2IsOpen} title="Diálog_2" message="etc, etc, etc" />

swContainer.svelte #

<script>
    import { Col, Container, Row } from 'sveltestrap';
    import SwButtonIten from './swButtonIten.svelte';

    export let uniqueID = 0;
    export let numRow = 0;
    export let numCol = 0;
    export let componentPositions;

</script>

<Container>
    {#each Array(numRow) as _, rowIndex}
        <Row>
            {#each Array(numCol) as _, colIndex}
                <Col>
                    {#each componentPositions.filter(pos => pos.rowPos === rowIndex && pos.colPos === colIndex) as item}
                        <svelte:component this={item.component} {...item.props} />
                    {/each}
                </Col>
            {/each}
        </Row>
    {/each}
</Container>

swButtonIten.svelte #

<script>
    import { Button } from 'sveltestrap';

    export let uniqueID = '';
    export let cstmLabel = '';
    export let rowPos = 0;
    export let colPos = 0;

    export let handleClick;

    function onClick() {
        handleClick();
    }
</script>

<Button on:click={onClick}>{cstmLabel}</Button>

swDialogIten.svelte #

<script>
    import {
        Button,
        Modal,
        ModalBody,
        ModalFooter,
        ModalHeader
    } from 'sveltestrap';

    export let isOpen = false;
    export let title = '';
    export let message = '';
</script>

<Modal bind:isOpen>
    <ModalHeader>{title}</ModalHeader>
    <ModalBody>{message}</ModalBody>
    <ModalFooter>
        <Button color="secondary" on:click={() => isOpen = false}>Close</Button>
    </ModalFooter>
</Modal>

<style>
    /* styles */
</style>

内容的提问来源于stack exchange，提问作者gioslaap