对象数组支持解码器StencilJS

Question

我想传递一个对象数组，然后遍历该数组并呈现每个对象。

我有以下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>
        );
      })}    
    )
}

我甚至不能让数组显示。我尝试使用JSON.parse函数来解析数据，但这也不起作用。如果有人能帮忙，我会非常感激的！

Answer 1

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

在模板(可能还有一些框架)中，您可以这样传递它：

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

注意:您的JSON是不正确的，您需要用=替换:。

如果您需要在普通HTML中使用该组件，则必须手动解析该属性字符串或使用javascript设置它。

有这在文档中的例子

手动设置支柱 从‘@模具/核心’导入{ Prop }；导出类TodoList { @Prop() myObject: object；@Prop() myArray: myArray；} HTML const todoListElement = document.querySelector('todo-list')；todoListElement.myObject = {}；todoListElement.myArray = []； 看道具改变 从‘@模具/核心’导入{ Prop，State，Watch }；导出类TodoList { @Prop() myObject: string；@Prop() myArray: string；@State() myInnerObject: object；@State() myInnerArray: Array；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)；}} HTML

Answer 2

您的问题是，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>

尝试和捕捉将防止一些严重的错误，并告诉你发生了什么，如果它不能被分析。也许你必须根据你的需要对它做一些调整，但是这个概念是可行的。在catch条件下，您可以尝试其他一些数据会话技术。

其次，我想分享一种完全不同的方法，这取决于您正在使用的环境，但您可以使用一个公共方法。无法直接将数据共享给web组件：

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

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

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

在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>

但是，在这种方法中，有一点你必须注意到。也许您的呈现函数不会被调用，因为您可以在该函数中手动使用this.render();，或者您可以在变量前面使用@State装饰器。