导出函数 returns 未定义

Question

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

以上只是一个例子，但我想要实现的是类似的东西。我有 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>

我收到的错误 is:GET http://localhost:3000/client/undefined net::ERR_ABORTED 404（未找到）（匿名）@catalog:70

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

Answer 1

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

也许一种解决方案是：

给 table-component list 作为道具 <Table {list} /> 并在 table-component export let list 中。现在您在 table-comp.

中引用了选定的 list

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

你也可以给table一个过滤列表，里面包含了你需要显示的所有信息，然后你就不需要在table-comp做任何处理，只显示数据。

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

导出函数 returns 未定义

Export function returns undefined

javascript

components

function

svelte