Question

我有一个简单的嵌套标签：

    <nested-tag>
        <p>myTitle: {myTitle}</p>
        <p>{myKeyword}</p>
        this.myTitle = opts.title;
        this.myKeyword = opts.keyword;
    </nested-tag>

您可以看到我将opts.title和keyword分配给两个新变量myTitle和myKeyword。

然后我在父标记的循环中使用它：

    <my-tag>
        <input type="text" onkeyup={search} value={keyword} />

        <ul>
           <li each={items}>
           <nested-tag title={title} keyword={parent.keyword}></nested-tag>
           </li>
        </ul>

        this.keyword = ""
        var initItems = [{ title:  "aaaa"}, { title: "bbbb"} ]
        this.items = initItems

        this.search = function(event) {
          this.keyword = event.target.value;
          this.items = initItems.filter((item) => item.title.indexOf(this.keyword) >=0 );
        }
    </my-tag>

您可以看到我将parent.keyword传递给nested-tag作为keyword变量。

当我在文字输入中输入内容时，keyword会被更改，因此<nested-tag>将使用新的parent.keyword重新创建。

但事实并非如此，嵌套标签的{myKeyword}始终为空。我必须直接用opts.keyword调用重写它：

    <nested-tag>
        <p>opts.title</p>
        <p>opts.keyword</p>
    </nested-tag>

现在它运作良好。

我不确定为什么以及如何修复它？我是否必须始终在嵌套标记中使用opts.xxx？

现场演示在这里：

http://jsfiddle.net/3jsay5dq/10/

您可以在文本输入中键入内容以查看结果

Answer 1

组件nested-tag中的javascript在实例化组件时运行。因此，在生成组件时，myTitle和myKeyword将使用传入的任何选项进行初始化。但是，在更新时，myTitle和myKeyword仍然是指向实例化期间设置的值。最简单的方法是使用opts[key]，因为它们将始终反映传递给组件的内容。如果您坚持使用自己的本地属性，那么您可以像这样修改组件：

<nested-tag>
    <p>myTitle: {myTitle}</p>
    <p>{myKeyword}</p>

    // this will run every time there is an update either internally or from a passed opts
    this.on('update', () => {
        this.myTitle = this.opts.title;
        this.myKeyword = this.opts.keyword;
    })

    // this will only run once during instantiation
    this.myTitle = opts.title;
    this.myKeyword = opts.keyword;

    /* 
    // could be refactored to
    this.setMyProps = () => {
          this.myTitle = this.opts.title;
          this.myKeyword = this.opts.keyword;
    } 

    // bind it to update function
    this.on('update', this.setMyProps)
    // run once for instantiation
    this.setMyProps()

    */
</nested-tag>

为什么在RiotJs中嵌套标签中的某些变量没有改变？

1 个答案: