hyper.Component 中的条件渲染未更新 DOM

Question

我想知道为什么以下代码段没有更新 DOM

    const { hyper, wire } = hyperHTML;

    class Input extends hyper.Component {
      get defaultState() {
        return { error: false };
      }
      onclick() {
        this.setState(prev => ({ error: !prev.error }));
      }

      render() {

        const textField = wire()
        `
          <div onconnected=${this} ondisconnected=${this}>
            <input type="text" value="foo" onclick=${this}>
            <label>bar</label>
          </div>
          `;


        let finalNode;
        if (this.state.error) {

          finalNode = this.html `
            <div>
              ${textField}
              <p>
                some name
              </p>
            </div>
            `;

        } else {
          finalNode = this.html `
            <div>
              ${textField}
            </div>
            `;
        }
        return finalNode;
      }
    }


    document
      .getElementById('root')
      .appendChild(new Input().render());

我希望它会首先呈现 textField，然后在单击时呈现 p 元素。我可以看到进行了渲染调用，但生成的元素并未以 DOM.

结尾

Answer 1

使用 hyper.Component 最好的方法是使内容有条件，而不是作为一个整体的根。

为此，您可以简单地使用三元，或 array.concat(...) 或任何其他将更新组件的方式。

这就像更新实例和替换实例之间的区别。从内部看，组件无权在其父级上替换自身，除非您明确这样做。

然而，这个例子比看起来更简单，你可以看到它在这个 Code Pen.

上运行

此外，如果您不在class中指定onconnected和ondisconnected回调，则无需在节点上指定它们。

const { hyper, wire } = hyperHTML;

class Input extends hyper.Component {

  get defaultState() { return { error: false }; }

  onclick() {
    this.setState(prev => ({ error: !prev.error }));
  }

  render() { return this.html`
    <div>
      <div>
        <input type="text" value="foo" onclick=${this}>
        <label>bar</label>
      </div>
      ${this.state.error ?
        wire(this, ':extra')
        `<p> some name </p>` :
        null
      }
    </div>`;
  }
}

document.body.appendChild(new Input().render());

希望对您有所帮助。

hyper.Component 中的条件渲染未更新 DOM

Conditional rendering in hyper.Component not updating DOM

javascript

hyperhtml