Typescript 对象数组Prop Decorator StencilJS

我希望传递一个对象数组，然后遍历该数组并渲染每个对象

我有以下html文件：

<stencil-component 
   cards = '[{"cardTitle"="placeholder", "copy"="copy1"},{"cardTitle"="placeholder2", "copy"="copy3"}]'>
</stencil-component>

在我的tsx文件中，我有以下内容：

@Prop() cards: Array<object> = [];

render(){
    return  (
      {this.cards.map(card) => {

        return (
          <div>
            <h1>{card.cardTitle}</h1>
            <p>{card.copy}</p>
          </div>
        );
      })}    
    )
}

@Prop（）卡片：数组=[]；
render（）{
返回(
{this.cards.map（card）=>{
返回(
{card.cardTitle}
{card.copy}

);
})}    
)
}

---

我甚至无法显示阵列。我尝试使用JSON.parse函数来解析数据，但也没有成功。如果有人能帮忙，我将非常感激

HTML属性只能保存字符串，因此如果在模具外部使用组件，则必须将所有属性作为字符串传递

在模具（可能还有一些框架）中，您可以这样传递它：

<stencil-component 
   cards={[{"cardTitle":"placeholder", "copy":"copy1"},{"cardTitle":"placeholder2", "copy":"copy3"}]}>
</stencil-component>

HTML

const topolistelement=document.querySelector（'todo-list'）；
todoListeElement.myObject={}；
todoListeElement.myArray=[]；

观看道具变化

import { Prop, State, Watch } from '@stencil/core';

export class TodoList {
  @Prop() myObject: string;
  @Prop() myArray: string;
  @State() myInnerObject: object;
  @State() myInnerArray: Array<string>;

  componentWillLoad() {
    this.parseMyObjectProp(this.myObject);
    this.parseMyArrayProp(this.myArray);
  }

  @Watch('myObject')
  parseMyObjectProp(newValue: string) {
    if (newValue) this.myInnerObject = JSON.parse(newValue);
  }

  @Watch('myArray')
  parseMyArrayProp(newValue: string) {
    if (newValue) this.myInnerArray = JSON.parse(newValue);
  }
}

从'@stencil/core'导入{Prop，State，Watch}；
将类导出到polist{
@Prop（）myObject:字符串；
@Prop（）myArray:string；
@State（）myInnerObject:对象；
@State（）myInnerArray:Array；
componentWillLoad（）{
this.parseMyObject属性（this.myObject）；
this.parseMyArrayProp（this.myArray）；
}
@监视（‘myObject’）
parseMyObjectProp（新值：字符串）{
if（newValue）this.myInnerObject=JSON.parse（newValue）；
}
@监视（'myArray'））
parseMyArrayProp（newValue:string）{
if（newValue）this.myInnerArray=JSON.parse（newValue）；
}
}

HTML

---

您的问题是JSON实际上不是JSON（将=替换为：），而且当您通过组件的属性共享数据时，数据不会自动解析为对象数组。我会使用一个通用函数，比如

getDataFromProperty

，并将其外包到一个不同的文件中，您可以在所有web组件中使用它。但现在让我们保持简单：

@Prop() cards: Array<object> = [];

private getDataFromProperty(toParse):any{
 try(JSON.parse(toParse)){
  return JSON.parse(toParse);
 }catch(e){
  //some different conversations you wanna try e.g.
   console.error('Couldnt JSON parse', e);
   if(toParse.split(',').length > 0) return toParse.split(',');
 }
}

render(){
 if(!this.cards) this.cards = this.getDataFromProperty(this.cards);
    return  (
      {this.cards.map(card) => {

        return (
          <div>
            <h1>{card.cardTitle}</h1>
            <p>{card.copy}</p>
          </div>
        );
      })}    
    )
}

<stencil-component 
   cards = '[{"cardTitle": "placeholder", "copy": "copy1"},{"cardTitle": "placeholder2", "copy": "copy3"}]'>
</stencil-component>

在HTML中

    <stencil-component id="web-component"></stencil-component>
    <script>
     let data = '[{"cardTitle": "placeholder", "copy": "copy1"},{"cardTitle": "placeholder2", "copy": "copy3"}]';

     document.getElementById("web-component").setData(data);
     //just call the setData function from outside works with jquery too
    </script>

让数据=“[{cardTitle:”占位符“，”副本“：”copy1“}，{“cardTitle:”占位符2“，”副本“：”copy3“}]”；
document.getElementById（“web组件”）.setData（数据）；
//只需从外部调用setData函数，jquery也可以使用

但在这种方法中有一点你必须注意。如果您只需使用

this.render（），就可以在该函数中手动调用渲染函数，那么可能不会调用您的渲染函数

或者可以在变量前面使用

@State

装饰符

<todo-list my-object="{}" my-array="[]"></todo-list>

@Prop() cards: Array<object> = [];

private getDataFromProperty(toParse):any{
 try(JSON.parse(toParse)){
  return JSON.parse(toParse);
 }catch(e){
  //some different conversations you wanna try e.g.
   console.error('Couldnt JSON parse', e);
   if(toParse.split(',').length > 0) return toParse.split(',');
 }
}

render(){
 if(!this.cards) this.cards = this.getDataFromProperty(this.cards);
    return  (
      {this.cards.map(card) => {

        return (
          <div>
            <h1>{card.cardTitle}</h1>
            <p>{card.copy}</p>
          </div>
        );
      })}    
    )
}

<stencil-component 
   cards = '[{"cardTitle": "placeholder", "copy": "copy1"},{"cardTitle": "placeholder2", "copy": "copy3"}]'>
</stencil-component>

@Prop() cards: Array<object> = [];

@Method() setData(data){
  this.cards = data;
}

render(){
  //your render function as it was
}

    <stencil-component id="web-component"></stencil-component>
    <script>
     let data = '[{"cardTitle": "placeholder", "copy": "copy1"},{"cardTitle": "placeholder2", "copy": "copy3"}]';

     document.getElementById("web-component").setData(data);
     //just call the setData function from outside works with jquery too
    </script>