Question

我正在努力将功能作为属性传递给Polymer组件。通过使用一种方式数据绑定从另一个Polymer组件执行此操作时，我设法使其正常工作，但是当我在React项目中加载我的Polymer组件并尝试将作为字符串通过的属性传递给函数时。 / p>

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

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

<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组件加载良好，仅此单击处理程序部分有效。我已经尝试过各种语法，但是没有运气。我正在使用Polymer 3和React 15，并且正在我的React组件中加载react-polymer库。

Answer 1

似乎您无法根据我的尝试直接调用Polymer的功能。但是我已经能够在React 16中使用Polymer Element或WebComponent。实现是，安装您计划使用的WebComponent并将其导入到将使用WebComponent的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);
  })
}

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

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

1 个答案: