gpt4 book ai didi

javascript - 如何将回调函数从 React 传递给 litelement?

转载 作者:行者123 更新时间:2023-11-30 19:52:06 36 4
gpt4 key购买 nike

我正在尝试在我的 React 项目中使用 lit-element 组件,我想将回调函数传递给 React 中的 lit-element 组件,但没有成功。

我尝试了几种不同的方法,例如更改属性类型,以及将函数作为字符串传递,但都没有用。

点亮元素组件代码:

import { LitElement, html } from "lit-element";

class MyButton extends LitElement {
static get properties() {
return {
clickHandler: {
type: String
},
bar: {
type: String
}
};
}

render() {
const foo = this.clickHandler; //value is undefined
const bar = this.bar; //value is "it's bar"
return html`
<button @click=${this.clickHandler}>click me</button>
`;
}
}

customElements.define("my-button", MyButton);

react 端代码:

<my-button clickHandler={() => alert("clicked")} bar="it's bar" />

我在组件的渲染部分放置了一个断点,我可以看到“bar”值被正确传递,但“clickHandler”的值未定义。

有人知道如何将函数从 React 传递到 lit-element 吗?

谢谢!

最佳答案

这个问题可能不仅仅适用于 React。这很笼统,我如何将处理程序从父组件传递到子组件,无论是 lit 元素还是 html 元素。

根据属性文档,https://lit-element.polymer-project.org/guide/properties

<my-element 
mystring="hello world"
mynumber="5"
mybool
myobj='{"stuff":"hi"}'
myarray='[1,2,3,4]'>
</my-element>

目前似乎不支持(回调)功能。那么 Element 如何处理来自父级别的事件?

根据事件文档,https://lit-element.polymer-project.org/guide/events ,您可以将任何事件发送到 dom 树,包括您的父级。 Dom 事件系统比 React prop 系统更广泛。

class MyElement extends LitElement {
...
let event = new CustomEvent('my-event', {
detail: {
message: 'Something important happened'
}
});
this.dispatchEvent(event);
}

然后在点亮或非点亮的上下文中,使用以下内容来处理事件,

const myElement = document.querySelector('my-element');
myElement.addEventListener('my-event', (e) => {console.log(e)});

这样你就可以允许子级触发父级的实现,这正是回调的定义。

关于javascript - 如何将回调函数从 React 传递给 litelement?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54372246/

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com