React + Polymer:将回调从 React 传递到 Polymer 组件

Question

我正在努力将函数作为属性传递到聚合物组件中。通过使用单向数据绑定从另一个 Polymer 组件执行此操作时，我设法让它工作，但是当我在 React 项目中加载我的 Polymer 组件并尝试为它作为字符串通过的属性传递函数时。

聚合物组件的简化版本：

export class PolymerButton extends PolymerElement {
static get template() {
return html`
<div>
[[text]]
</div>
`;
}
static get properties() {
return {
text: { type: String },
clickHandler: {
type: Function,
value: null
},
disabled: { type: Boolean }
};
}
ready() {
super.ready();
this.addEventListener('click', (e) => this.onButtonClick(e));
}
onButtonClick(e) {
if (!this.disabled) {
this.clickHandler(e);
}
}
}
customElements.define('ppp-button', PolymerButton);

我如何设法在另一个聚合物组件中使用它：

<ppp-button text="Click me" click-handler="[[_clickCallback]]"></ppp-button>

我如何尝试在 React 中使用它：

render() {
return (
<div className="export-btn">
<ppp-button text="Export" click-handler={this.exportReport} />
</div>
);
}

当我单击该按钮时，clickHandler 属性的值将是字符串"{this.exportReport}"。

聚合物组件加载正常，只是这个点击处理程序部分起作用。我尝试了各种语法，但没有运气。我正在使用 Polymer 3 和 React 15，并且正在 React 组件中加载react-polymer库。

Answer 1

似乎你不能根据我尝试过的东西直接调用聚合物的功能。但是我已经能够在 React 16 中使用 Polymer Element 或 Web 组件。实现方式是，安装您计划使用的 Web 组件并将其导入将使用该 Web 组件的 react 组件中。

import '@vaadin/vaadin-date-picker';

然后在组件内部render函数下：

<div > <vaadin-date-picker label="When were you born?" ref="dobRef"></vaadin-date-picker> </div>

我在这里使用了 ref，这是一种掌握 DOM 并传递值的方法。此外，您还必须使用componentDidMount：

componentDidMount() {
this.refs.dobRef.addEventListener('change', e=> {
console.log('componentDidMount', e.target.value);
})
}

事件侦听器将根据要处理的事件而有所不同。