gpt4 book ai didi

javascript - Svelte:如何将 Action 传递给组件?

转载 作者:行者123 更新时间:2023-12-05 01:08:20 24 4
gpt4 key购买 nike

有一个类似的问题被问到 here但我不相信答案适用于我的用例。

我正在使用 Svelte MaterialUI并试图扩展 DataTable具有拖放行能力的组件。我正在使用 svelte-dnd-action支持拖放行为的模块。

以下工作正常。我可以拖放表格的行。

<table>
<thead>...</thead>
<tbody use:dndzone{...opts}>
...data
<tbody>
</table>

但是,当尝试将模块插入 Material UI 组件时,我收到一条错误消息,指出“操作只能应用于 DOM 元素,而不是组件。”

<DataTable>
<Head>...</Head>
<Body use:dndzone={...opts}>
...Data
</Body>
</DataTable>

Body 组件的定义如下:

<tbody
use:useActions={use}
use:forwardEvents
class="mdc-data-table__content {className}"
{...exclude($$props, ['use', 'class'])}
><slot></slot></tbody>

<script>
import {setContext} from 'svelte';
import {get_current_component} from 'svelte/internal';
import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
import {exclude} from '@smui/common/exclude.js';
import {useActions} from '@smui/common/useActions.js';
const forwardEvents = forwardEventsBuilder(get_current_component());
export let use = [];
let className = '';
export {className as class};
setContext('SMUI:data-table:row:header', false);
</script>

有没有办法将我的 Action 转发到这个组件?或者更好的方法来处理这个用例?提前谢谢你。

最佳答案

Action 只能应用于 DOM 元素。但是,可以通过属性将函数传递给组件,并且该组件可以在“使用”指令中使用此属性。

一个例子:

<script>
function myAction() {
...
}
</script>

<!-- pass myAction in a property 'action' -->
<MyComponent action={myAction}/>

<!-- MyComponent.svelte -->
<script>
export let action;
</script>

<div use:action/>

如果您查看 smui 库,您会看到每个组件都导出一个“使用”属性,并将该属性的内容应用于 dom 元素。 use:useActions={use}use 属性中定义的 Action 作为 Action 注入(inject)。

换句话说,在 smui 中,您可以使用 use 属性将操作传递给组件。

<Body use={myAction}/>

关于javascript - Svelte:如何将 Action 传递给组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66141626/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com