Question

有人问过 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 转发到这个组件？或者有更好的方法来处理这个用例？提前致谢。

Answer 1

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}/>

Answer 2

一般的答案是您不能将操作传递给组件。也就是说，除非组件为您公开了这个。

幸运的是你提到的图书馆有它，正如他们的文档中所写的：

<块引用>

您可以使用 use={[Action1, [Action2, action2Props], Action3]} 向组件添加动作。

所以在你的情况下，我认为代码是

<Body use={[[dndzone, opts]]}>

Svelte：如何将动作传递给组件？

2 个答案: