Как использовать вложенные веб-компоненты, созданные Stenciljs в React - PullRequest
Новая
       41

Как использовать вложенные веб-компоненты, созданные Stenciljs в React

0 голосов
/ 20 июня 2019

У меня есть репозиторий с Stencil.js, и я создаю пару веб-компонентов, вложенных и работающих в среде разработки Stencil. в примере у меня есть родительский компонент, который использует дочерний компонент: 

import { Component, h, Prop, State } from "@stencil/core";

@Component({
  tag: "parent-component"
})
export class MyParent {

  @Prop() carddata: any;

  render() {
    return (
      <div>
        <child-component
          carddata={this.carddata}
        />
      </div>
    );
  }
}

это дочерний компонент: 

import { Component, Prop, h } from "@stencil/core";

@Component({
  tag: "child-component"
})
export class MyChild {

  @Prop() carddata: any;

  renderItems(items: string[]): string {
    let newString = "";
    items.map((item: string) => {
      newString = newString.concat(item, ", ");
    });
    return newString.substr(0, newString.length - 2);
  }

  render() {
    const { items } = JSON.parse(this.carddata);
    return (
      <p>
        Items: <b>{this.renderItems(items)}</b>
      </p>
    );
  }
}

Когда я собираю и использую пакет, созданный в другом хранилище (приложение React), у меня возникают ошибки при рендеринге веб-компонентов. Это компонент React, где я использую веб-компонент: 

[...]

import * as cardData from "./card-mock-data.json";

[...]

  render() {
    return (
      <Wrap>
        <parent-component
        carddata={JSON.stringify(cardData)}/>
      </Wrap>
    );
  }

[...]

И ошибка TypeError: Cannot read property 'map' of undefined. Трудно отлаживать, потому что это скомпилированный код, но, похоже, ошибка относится к этому фрагменту (скомпилированного) кода: 

ChildComponent.prototype.renderItems= function (items) {
    var newString = "";
    items.map(function (item) {
        newString = newString.concat(item, ", ");
    });
    return newString.substr(0, newString.length - 2);
};

Может быть, я что-то не так, могу ли я передать данные во вложенный компонент, используя только родительский тег в React? Может быть, я пропускаю какой-то шаг "разбора"?

Спасибо за вашу помощь

РЕДАКТИРОВАТЬ: добавить фрагмент картыДанные: 

{
  "id": "invito-biologia-blu",
  "titolo": "Il nuovo invito alla biologia blu",
  "img": "http://media.curtisinvitoblu.bedita.net/a1/40/curti_a140cb3359b7611d84f80e384d2fb49b/curtis_plus-1A_320x_71bc3567ace1ff728caef1b381d7535b.png",
  "tags": ["Polimeri", "biochimica", "biotecnologie", "sostenibilità"],
  "autori": ["Helena Curtis", "Sue Barnes", "Alicia Mastroianni"],
  "anno": 2017,
  "actions": ["Leggi sul browser", "Sito e risorse del libro", "ZTE"]
}

когда я регистрирую cardData в render (), у меня есть это: 

Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): "Module"}
...