AJ *_* X. 4 javascript svelte svelte-component svelte-3
这里有一个类似的问题，但我不相信答案适用于我的用例。
我正在使用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 元素。但是，可以通过属性将函数传递给组件，并且该组件可以在“use”指令中使用此属性。
一个例子：
<script>
function myAction() {
...
}
</script>
<!-- pass myAction in a property 'action' -->
<MyComponent action={myAction}/>
<!-- MyComponent.svelte -->
<script>
export let action;
</script>
<div use:action/>
如果您查看 smui 库，您会发现每个组件都会导出一个“use”属性，并将该属性的内容应用于 dom 元素。use:useActions={use}将属性中定义的操作注入use为操作。
换句话说，在 smui 中，您可以使用use属性将操作传递给组件。
<Body use={myAction}/>
| 归档时间： |
|
| 查看次数： |
5780 次 |
| 最近记录： |