Question

通过单击一个组件中的按钮，我使用以下代码删除父级中的组件：

// componentA.jsx
class ComponentA extends React.PureComponent {
  removeB() {
    this.setState({ mounted: false })
  }

  renderB() {
    if (!this.state.mounted) {
      return null
    }
    return <ComponentB />
  }

  render() {
    return <div>
      {this.renderB()}
      <ComponentC onClick={this.removeB} />
    </div>
  }
}

// componentB.jsx
class ComponentB extends React.PureComponent {
  render() {
    return ...
  }
}

// componentC.jsx
class ComponentC extends React.PureComponent {
  render() {
    return <Button onClick={this.props.onClick} />
  }
}

我得到了错误：

无法在“节点”上执行“ removeChild”：要删除的节点不是该节点的子节点。

Answer 1

您的问题是因为函数this中的removeB变量引用了错误的作用域（在您的示例中，ComponentC的作用域应该引用正确的作用域，即{ {1}}。

在传递事件处理程序之前，应将其正确绑定到ComponentA的作用域。

您可以通过以下几种方式做到这一点：

ComponentA

或者：

class ComponentA extends React.PureComponent {
  constructor() {
     this.removeB = this.removeB.bind(this);  // Bind event handlers in constructor
  }

  removeB() {
    this.setState({ mounted: false })
  }

  ....

  render() {
    return <div>
      {this.renderB()}
      <ComponentC onClick={this.removeB} />
    </div>
  }
}

您可以在此处阅读有关JS词法作用域的更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

此外，React文档在此处提到了有关将事件处理程序绑定到正确范围的信息：

https://reactjs.org/docs/handling-events.html

如何在React中安全卸载组件？

1 个答案: