riot.js - Riot.js：安装具有相同变量的标签

Question

我有 3 个海关标签my-tag1：my-tag2和my-tag3

我像这样使用它们：

<my-tag1>
  <my-tag2 attr1="a">
    <my-tag3 attr2="b"></my-tag3>
  </my-tag2>
</my-tag1>

我正在安装这样的所有标签：

riot.mount('*', { store:reduxStore });

my-tag1可以访问store但my-tag2不能my-tag3做到。

但是，如果我执行以下操作，my-tag2可以使用store：

<my-tag1>
  <my-tag2 attr1="a" store={opts.store}>
    <my-tag3 attr2="b"></my-tag3>
  </my-tag2>
</my-tag1>

为什么？我必须在我的所有标签中这样做吗？

Answer 1

嵌套标签时，会为子标签创建一个新的上下文。在新上下文中，所有继承的父级属性都设置为undefined.

参考：

• https://github.com/riot/riot/issues/1720
• http://riotjs.com/guide/#context

在您的示例中，通过添加store={opts.store}in ，您将在的新上下文my-tag2中定义一个选项。如果您不这样做，则' 上下文中的选项是从 继承的 ，但它被设置为（所以看' 的值）。 storemy-tag2storemy-tag2my-tag1undefinedmy-tag2undefinedstore

为了在 、 和 之间共享的值store，我认为有两种方法：my-tag1my-tag2my-tag3

1)将' 值my-tag3初始化为'sstoremy-tag2store

<my-tag1>
  <my-tag2 attr1="a" store={opts.store}>
    <my-tag3 attr2="b" store={opts.store}></my-tag3>
  </my-tag2>
</my-tag1>

2)使用 变量将' 的值my-tag3初始化为' 。storemy-tag1storeparent

<my-tag1>
  <my-tag2 attr1="a" store={opts.store}>
    <my-tag3 attr2="b" store={parent.opts.store}></my-tag3>
  </my-tag2>
</my-tag1>

Answer 2

riot.mount('*')挂载所有顶级标签。顶级标签分别负责挂载其子标签如果要通过商店，我认为最好使用mixins。见http://riotjs.com/guide/#mixins

干杯!