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

Question

这里有一个类似的问题，但我不相信答案适用于我的用例。

我正在使用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

动作只能应用于 DOM 元素。 但是，可以通过属性将 function 传递给组件，并且该组件可以在“使用”指令中使用此属性。

一个例子：

<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属性中定义的动作作为动作注入。

换句话说，在 smui 中，您可以使用use属性将操作传递给组件。

<Body use={myAction}/>

Answer 2

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

幸运的是，您提到的库有它，正如他们的文档中所写：

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

所以在你的情况下，我相信的代码是

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

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

问题描述

2 个解决方案

解决方案1
2 2021-02-10 17:34:49

解决方案2
2 已采纳 2021-02-10 17:36:57

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

问题描述

2 个解决方案

解决方案1 2 2021-02-10 17:34:49

解决方案2 2 已采纳 2021-02-10 17:36:57

解决方案1
2 2021-02-10 17:34:49

解决方案2
2 已采纳 2021-02-10 17:36:57