导出函数返回未定义

Question

我正在尝试根据其内容显示所选 li 标记的内容。 例如：如果用户单击颜色，则内容应显示所有颜色。 否则，形状将显示所有形状。

以上只是一个例子，但我想要实现的是类似的。我有 2 个苗条的组件。 SchemaNav.svelte 基本上处理了不同 li 项之间的 Tab 功能。而 Table.svelte 处理我想要显示内容的表格。

SchemaNav.svelte

<script>
var list;
    export function onItemClick(names) {
         list = names.table_name; //to get the selected li value 
        return list;
    }

     
<script>
    {#if activeItem === "common"}
        <div class="content">
            <div class="tname">
                {#each name as names }
                    {#if names.table_schema === activeItem}
                        <ul>
                            <li on:click={() => onItemClick(names)}>
                            {names.table_name}</li>
                            
                        
                            
                        </ul>
                    {/if}
                {/each}
            </div>
            <Table  />
            
    </div>  
{/if}   

Tables.svelte

<script>
import {onItemClick} from './SchemaNav.svelte';
</script>
            <table class="table table-bordered table-hover dt-responsive">
                <caption class="text-center">Column names</caption>
                    <thead>
                        <tr>
                            <th>Column Name</th>
                            <th>Data Type</th>
                        </tr>
                    </thead>
                    <tbody>
                    {#if {onItemClick} === info.table_name}
                    {#each info as item}
                        
                        <tr>
                            <td>{item.column_name}</td>
                            <td>{item.data_type}</td>
                        </tr>
                     
                    {/each}
                    {/if}
                    </tbody>
            </table>

我得到的错误是：GET http://localhost:3000/client/undefined net::ERR_ABORTED 404 (Not Found) （匿名）@目录：70

如何让选定的 Li 项目相应地显示其内容...

Answer 1

我不确定你想做什么。我认为你应该用 REPL 做一个非常简单的例子，然后你会得到更好的答案。

也许一种解决方案是：

给表格组件list作为道具<Table {list} />和表格组件export let list。现在您在 table-comp 中引用了选定的 list。

这是一个 REPL：
https://svelte.dev/repl/6c756e5f65784b1796dd92dd148c04da?version=3.24.1

您还可以给表格一个过滤列表，其中包括您需要显示的所有信息，然后您不需要在 table-comp 中进行任何处理，只显示数据。

这是第二个解决方案的 REPL：
https://svelte.dev/repl/5668cdee007c4418b13667350a589f80?version=3.24.1