3

我正在尝试在我的 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);

反应侧代码：

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

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

有没有人知道如何将函数从 React 传递给 lit-element？

谢谢！

4

3 回答 3

2

这个问题可能不仅对反应有效。这很笼统，我如何将处理程序从父组件传递到子组件，无论是 lit-element 还是 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道具系统要广泛得多。

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)});

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

于 2021-02-28T16:07:36.527 回答
1

我发现可行的是在 react 组件中添加一个 ref 到 lit 元素，然后在其上设置属性。

因此，对于以下 JSX：

<some-webcomponent ref={this.myRef}></some-webcomponent>

您可以在 componentDidMount 中将属性传递给“some-webcomponent”：

componentDidMount () {
  const element = this.myRef.current;
  element.someCallback = () => // ...
}

它不是太漂亮，但我也不认为它是黑客。虽然需要相当多的样板：/

这是一个完整的 React 组件供参考：

class MyComponent extends React.Component {   
  constructor(props) {     
    super(props);     
    this.myRef = React.createRef();   
  }   

  render() {     
    return <some-webcomponent ref={this.myRef}></some-webcomponent>;   
  } 

  componentDidMount() {
    const element = this.myRef.current;  
    element.someCallback = () => console.log(“call!”);
  }
}

点亮元素在哪里：

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

class SomeWebcomponent extends LitElement {
   static get properties() {    
     return {       
      someCallback: { type: Function }
     };
   }

   render() {     
     return html`       
       <button @click=${this.someCallback}>click me</button>     
     `;   
    } 
}  

customElements.define("some-webcomponent", SomeWebcomponent);
于 2019-02-18T08:38:08.930 回答
0

在https://github.com/Polymer/pwa-starter-kit/blob/template-no-redux/src/components/my-app查看 no redux pwa-starter-kit 的菜单按钮单击功能.js。我相信这提供了可能对你有用的例子。

于 2019-01-31T22:57:53.307 回答