1

我有以下 hyperHTML 组件，一切都按预期工作，唯一的问题是整个组件 DOM 在每次this.setState()调用时都会重新呈现。

我的问题：

有没有办法在不重新渲染整个组件 DOM 的情况下更新 DOM 上的通知字符串？

const { hyper } = hyperHTML;

class searchComponent extends hyper.Component {
    constructor(data) {
        super();
        this.setState({ notification: '' });
    }
    onChange() {
        // ...
        if ( condition ) {
            this.setState(() => ({ notification: 'notification text!' }));
        }
        // ...
    }
    async listTags() {
        //...
        // async content 
        //...
    }
    render() {
        this.html `
        <div id="search_container">
            <select name="tags" id="tags_search" class='form-control m0' multiple="multiple" onChange=${this.onChange}>
            ${{
                any: this.listTags(),
                placeholder: 'incoming..!',
            }}
            </select>
            <div class="search_notification">
                <!-- I want to re render only this part of the DOM -->
                ${this.state.notification}
            </div>
        </div>
        `
    }
}
4

1 回答 1

2

您的代码中几乎没有陷阱。首先，这onChange将无法按预期工作，您正在失去原样的上下文。您要么只使用onchangeHTML 事件，然后调用该方法onchange并简单地this用作事件侦听器：

const { hyper } = hyperHTML;

class SearchComponent extends hyper.Component {
  onchange() {
    this instaneof SearchComponent; // true
  }
  render() { return this.html`
    <div id="search_container">
      <select onchange=${this}>
      ${...}
      </select>
    </div>`
  }
}

onChange或者你在构造函数中绑定方法。

你也忘了return this.htmlinside render()，如果你想把你的组件放在 DOM 上，这是需要的。

但是，为了快速演示代码，假设这些是无关紧要的错误，您需要了解异步世界是异步的。

如果您有一个异步操作，则无法判断该操作是否已解决，您只需将其传递，这正是您正在做的。

您正在更改组件的状态，期望以前的异步操作不会再次被触发。

但是组件如何知道这种状态变化是否会产生不同的布局呢？TL;DR的答案是它不能，稍长一点的是你有一个异步的、不相关的行为，附加到每个更新，但你希望异步行为只触发一次，而不是每次更新。

可能的解决方案

您可以创建一个部件的子组件，并在SearchComponent初始化期间实例化一次 ( constructor) 或简单地使用比当前更有意义的占位符。

事实上，现在您正在创建的输出与<select>incoming..!</select>标准 HTML 一样毫无意义。

Aselect可以有option标签，将其用作某些文本的通用容器就像在滥用其潜力。

你想要的是类似于, 和它的内容数组的disabled=${this.optionsResolved}东西。select${this.options}

通过这种方式，您在解决您的选项时没有任何更改，并且一旦发生，您就会有一个正确的选项列表。

您可以在此代码笔中看到一个示例

于 2017-12-23T15:34:26.290 回答