Javascript 如何从React向litelement传递回调函数？

我试图在我的React项目中使用lit-element组件，我想从React将回调函数传递给lit-element组件，但运气不好

我尝试了几种不同的方法，比如更改属性类型，将函数作为字符串传入，但都不起作用

照明元件组件代码：

从“lit元素”导入{LitElement，html}；
类MyButton扩展了LitElement{
静态获取属性（）{
返回{
单击处理程序：{
类型：字符串
},
酒吧：{
类型：字符串
}
};
}
render（）{
const foo=this.clickHandler；//值未定义
const bar=this.bar；//值为“it's bar”
返回html`
点击我
`;
}
}
自定义元素。定义（“我的按钮”，我的按钮）；

反应侧代码：

alert（“clicked”）}bar=“这是条”/>

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

有人知道如何将函数从React传递到lit元素吗

---

谢谢

查看位于的无redux pwa初学者工具包的菜单按钮单击功能。我相信这提供了一个可能适用于您的示例。

我发现有效的方法是在react组件中向lit元素添加一个ref，然后逐字设置它的属性

因此，对于以下JSX：

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

它不太漂亮，但我也不认为它是一个黑客。但需要大量的样板文件：/

这里有一个完整的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!”);
  }
}

类MyComponent扩展了React.Component{
构造器（道具）{
超级（道具）；
this.myRef=React.createRef（）；
}   
render（）{
返回；
} 
componentDidMount（）{
常量元素=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);

从“lit元素”导入{LitElement，html}；
类SomeWebcomponent扩展了LitElement{
静态获取属性（）{
返回{
someCallback:{type:Function}
};
}
render（）{
返回html`
点击我
`;   
} 
}  
定义（“一些webcomponent”，一些webcomponent）；

这个问题可能不仅仅适用于react。很一般，我如何将处理程序从父组件传递到子组件，或者是lit元素，或者是html元素

根据财产文件

然后在有灯光或无灯光的上下文中，使用以下方法处理事件：

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

---

通过这种方式，您可以允许孩子为家长启动实现，这正是回调的定义。

欢迎这样做，最好在答案中包含一个示例，而不是直接指向外部链接，因为链接可能会断开或更新为不相关的内容。它是否显示“单击”警报无论何时呈现我的按钮组件？即使它不是100%黑客攻击，它仍然不是它的设计目的，我相信答案是通过本机事件处理，而不是

ref

@Steve，抱歉没有第一次完成我的解决方案。我编辑了我的帖子，现在它应该解决了确切的问题，而不是问题所暗示的。我真的不认为其他作者提供的解决方案是目前为止的解决方案。

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

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

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