有一个类似的问题被问到here但我不认为答案适用于我的用例。
我在用着纤薄的材质 UI并试图延长数据表具有拖放行功能的组件。我正在使用简洁的 dnd 操作模块支持拖放行为。
以下效果很好。我可以拖放表格的行。
<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}/>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
