开发者问题收集

如何解决这个父级：元素返回 null？

2021-09-03
1322
javascript typescript

我看到了一篇从未解决的旧帖子，现在我对此很感兴趣。

未捕获的 TypeError：无法读取 typescript 中 null 的属性“append”

我尝试重现它，但也收到了错误：

Uncaught TypeError: Cannot read property 'append' of null 

export class UserForm {
  constructor(public parent: Element) {}

  template(): string {
    return `
        <div>
        <h1> User Form</h1>
        <input/>
        <div>
        `;

  }

  render(): void {
    const templateElement = document.createElement('template');
    templateElement.innerHTML = this.template();
    console.log(this.parent);
    this.parent.append(templateElement.content);
  }
}

this.parent 控制台也为我记录了 null 。我认为可能是因为 DOM 未及时加载，但我尝试了这个： 

export class UserForm {
  // parent: Element;

  // constructor(parent: Element) {
  //   this.parent = parent;
  // }
  constructor(public parent: Element) {}

  template(): string {
    return `<div>
      <h1>User Form</h1>
      <input />
    </div>`;
  }

  render(): void {
    const templateElement = document.createElement("template");
    templateElement.innerHTML = this.template();
    window.addEventListener("DOMContentLoaded", (event) => {
      console.log("DOM fully loaded and parsed");
    });
    console.log(this.parent);
    this.parent.append(templateElement.content);
  }
}

我得到了 DOM 完全加载和解析 的控制台日志，但 this.parent 仍然是 null 。如果您对 Element 执行命令 + 单击，您将得到 Element 是最通用的基类，Document 中的所有对象都从中继承。

有人知道这里发生了什么吗？

到目前为止，我相信这与您在 TypeScript 中并不总是能找到 Element 这一事实有关，因此您会得到 null ，但如果是这种情况，我们该如何解决呢？

2个回答

以下是我想到的一些可能有助于解决此问题的想法。

A：将渲染方法绑定到类。 B：添加 if 语句以防止错误发生。 

export class UserForm {
  constructor(public parent: Element) {
    console.log(parent);
    // Maybe binding the render method here might help.
    this.render = this.render.bind(this);
  }

  template(): string {
    return `<div>
      <h1>User Form</h1>
      <input />
    </div>`;
  }

  render(): void {
    const templateElement = document.createElement("template");
    templateElement.innerHTML = this.template();
    window.addEventListener("DOMContentLoaded", (event) => {
      console.log("DOM fully loaded and parsed");
    });
    console.log(this.parent);
    // Add a clause to prevent the error
    if(this.parent){
      this.parent.append(templateElement.content);
    }
  }
}

这些只是一些想法。

Matthew Auld
2021-09-03

因此，解决这个问题的关键似乎是非空断言运算符，或者在英语语法中我们称之为感叹号的符号。

基本上，你告诉 TypeScript 放松，不要对你大喊大叫，因为你知道自己在做什么。根常量肯定会引用 Element 。否则，如果省略运算符，如果找不到元素，则 root 可以引用 Element 或 null 。 

export class UserForm {
  constructor(public parent: Element) {}

  template(): string {
    return `<div>
      <h1>User Form</h1>
      <input />
    </div>`;
  }

  render(): void {
    const templateElement = document.createElement("template");
    templateElement.innerHTML = this.template();
    console.log(this.parent);

    this.parent.append(templateElement.content);
  }
}

以下是 index.ts 文件： 

import { UserForm } from "./views/UserForm";

const root: Element = document.getElementById("root")!;

const userForm = new UserForm(root);

userForm.render();

以下是 index.html ： 

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script src="./src/index.ts"></script>
  </body>
</html>
Daniel
2021-09-03