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

Question

有人提出了类似的问题，但我认为答案不适用于我的用例。

我正在使用 Svelte MaterialUI and attempting to extend the DataTable component with the ability to drag and drop rows. I'm using the svelte-dnd-action 模块来支持拖放行为。

以下工作正常。我可以拖放 table.

的行

<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

操作只能应用于 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

一般的答案是您不能将操作传递给组件。也就是说，除非组件已为您公开此内容。

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

You can add actions to the components with use={[Action1, [Action2, action2Props], Action3]}.

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

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

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

Svelte: How to pass action to component?

javascript

svelte

svelte-3

svelte-component