如何在Riot.js组件的HTML部分设置数组以声明动态列表？

我来帮你排查下这个问题～你遇到的核心问题是：在HTML标签属性里直接写JSON字符串形式的数组，Riot.js默认会把它当作字符串类型处理，而不是自动解析成JavaScript数组，这就导致子组件无法正确识别为列表数据。

问题根源 #

你当前的写法：

<c-artworkdisplay extras='[ { "extra_name": "Featured on xy","extra_source": "xy.com" }, { "extra_name": "Featured on zw","extra_source": "zw.com" } ]'> </c-artworkdisplay>

这里的extras属性值是一个字符串，子组件拿到的是这个JSON格式的字符串，而不是解析好的数组对象，所以无法按列表逻辑处理。

正确的解决方法 #

根据Riot.js的组件传值规则，推荐以下几种写法：

方法1：直接使用JS表达式语法（最直接）

在属性值外层用大括号{}包裹，Riot.js会自动解析里面的JavaScript代码，直接传递数组：

<c-artworkdisplay extras={[ 
  { extra_name: "Featured on xy", extra_source: "xy.com" }, 
  { extra_name: "Featured on zw", extra_source: "zw.com" } 
]}></c-artworkdisplay>

注意这里不需要用引号包裹数组，大括号已经告诉Riot这是一个JS表达式。

方法2：从父组件变量传递（更易维护）

如果这个列表数据需要复用或者动态生成，建议在父组件的脚本里定义变量，再传递给子组件：
父组件脚本部分：

// 父组件的脚本
this.artworkExtras = [
  { extra_name: "Featured on xy", extra_source: "xy.com" },
  { extra_name: "Featured on zw", extra_source: "zw.com" }
];

父组件模板部分：

<c-artworkdisplay extras={this.artworkExtras}></c-artworkdisplay>

这种方式更清晰，也方便后续修改数据。

方法3：子组件手动解析字符串（不推荐，仅作兼容）

如果因为某些原因必须用字符串形式传递，可以在子组件里手动将字符串解析为数组：
在c-artworkdisplay.tag的脚本中添加解析逻辑：

this.on('mount', function() {
  try {
    // 把字符串解析为数组
    this.extras = JSON.parse(this.extras);
  } catch (err) {
    console.error('解析extras数组失败:', err);
    // 解析失败时可以设置默认值
    this.extras = [];
  }
});

不过这种方式需要额外处理解析错误的情况，不如前两种方法优雅。

总结 #

优先使用方法1或方法2，它们更符合Riot.js的组件设计规范，能避免不必要的字符串解析问题。既然你提到之前用其他数组声明方式成功过，应该就是用了类似的表达式或变量传递的写法～

内容的提问来源于stack exchange，提问作者Lorant