React + Polymer: пройти обратный вызов из React в компонент Polymer

Question

Я пытаюсь передать функции как свойства в компоненты Polymer.Мне удалось заставить его работать, когда это делалось из другого компонента Polymer с помощью односторонней привязки данных, но когда я загружал свой компонент 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);

Как мне удалось использовать его в другом компоненте 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-polymer в свой компонент React.

Answer 1

Похоже, вы не можете напрямую вызывать функции Полимера, основываясь на том, что я пробовал.Но я смог использовать Polymer Element или веб-компонент с React 16. Реализация состояла бы в том, чтобы установить веб-компонент, который вы планируете использовать, и импортировать его в компонент реагирования, где будет использоваться веб-компонент.

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

Затем внутри вашего компонента в функции render:

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

Я использовал здесь ссылку, которая является способом получить DOMи передать значение.Кроме того, вам придется использовать componentDidMount:

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

Слушатель события будет зависеть от события, которое вы хотите обработать.