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

Question

There is a similar question asked here but I do not believe the answer applies to my use case. 这里有一个类似的问题，但我不相信答案适用于我的用例。

I'm using Svelte MaterialUI and attempting to extend the DataTable component with the ability to drag and drop rows.我正在使用Svelte MaterialUI并尝试通过拖放行的能力来扩展DataTable组件。 I'm using the svelte-dnd-action module to support the drag and drop behaviors.我正在使用svelte-dnd-action模块来支持拖放行为。

The following works just fine.以下工作正常。 I'm able to drag and drop rows of the table.我可以拖放表格的行。

 <table> <thead>...</thead> <tbody use:dndzone{...opts}>...data <tbody> </table>

However, when attempting to plug the module into a Material UI Component, I receive an error stating "actions can only be applied to DOM elements, not components."但是，当尝试将模块插入 Material UI 组件时，我收到一条错误消息，指出“操作只能应用于 DOM 元素，而不是组件。”

 <DataTable> <Head>...</Head> <Body use:dndzone={...opts}>...Data </Body> </DataTable>

The definition of the Body component looks like this: 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>

Is there a way to forward my Action to this component?有没有办法将我的Action转发到这个组件？ Or a better way to handle this use case?或者更好的方法来处理这个用例？ Thank you in advance.先感谢您。

Answer 1

Action can only be applied to DOM element.动作只能应用于 DOM 元素。 However, it's possible to pass a function by property to a component, and this component can use this property in a "use" directive.但是，可以通过属性将 function 传递给组件，并且该组件可以在“使用”指令中使用此属性。

An example:一个例子：

<script>
  function myAction() {
    ...
  }
</script>

<!-- pass myAction in a property 'action' -->
<MyComponent action={myAction}/>

<!-- MyComponent.svelte -->
<script>
  export let action;
</script>

<div use:action/>

If you look at the smui library, you'll see that every component export an 'use' property, and apply the content of this property to a dom element.如果您查看 smui 库，您会看到每个组件都导出一个“使用”属性，并将该属性的内容应用于 dom 元素。 use:useActions={use} inject the action defined in the use property as actions. use:useActions={use}将use属性中定义的动作作为动作注入。

In other words, in smui, you can pass actions to components by using the use property.换句话说，在 smui 中，您可以使用use属性将操作传递给组件。

<Body use={myAction}/>

Answer 2

The general answer is that you cannot pass actions to a component.一般的答案是您不能将操作传递给组件。 That is, unless the component has this exposed for you.也就是说，除非组件已经为您公开了这一点。

Luckily the library you mention has it, as is written in their documentation:幸运的是，您提到的库有它，正如他们的文档中所写：

You can add actions to the components with use={[Action1, [Action2, action2Props], Action3]}.您可以使用 use={[Action1, [Action2, action2Props], Action3]} 向组件添加操作。

So in your case the code I believe would be所以在你的情况下，我相信的代码是

<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