有一个类似的问题被问到 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/