javascript - 如何在 React 中使用由 Stenciljs 创建的嵌套 Web 组件

Question

我有一个包含 Stencil.js 的存储库，我创建了几个 Web 组件，嵌套并在 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 应用程序)中创建的包时，我在渲染 Web 组件时遇到错误。这是我在其中使用 Web 组件的 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 中的父标签将数据传递给嵌套组件吗？也许我错过了一些“解析”步骤？

谢谢你的帮助

编辑:添加 cardData 片段:

{
  "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"]
}

当我在 render() 中记录 cardData 时，我有这个:

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

Answer 1

问题是，React 16 将所有数据作为 HTML 属性传递给自定义元素。它不适用于对象或数组。

更多信息:https://custom-elements-everywhere.com/libraries/react/results/results.html

好消息是他们可能会在 React 17 中解决这个问题:https://github.com/facebook/react/issues/11347

要立即解决此问题，您需要将数据作为属性传递。

在这里查看 Ionic 团队解决方案:https://github.com/ionic-team/ionic/blob/master/react/src/components/createComponent.tsx