reactjs – 如何删除/卸载嵌套的反应组件

发布时间：2020-12-15 05:04:48 所属栏目：百科来源：网络整理

导读：我想卸载一个反应组件,它属于一个包含三个组件的父组件.父组件具有此渲染功能： render: function () { return ( div className={classes} Navbar ref="navbar"/ Home ref="home"/ Footer ref="footer"/ /div),handleNavbarClick: function () { // remove H

我想卸载一个反应组件,它属于一个包含三个组件的父组件.父组件具有此渲染功能：

render: function () {
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      <Home ref="home"/>
      <Footer ref="footer"/>
    </div>
),handleNavbarClick: function () {
  // remove Home
}

如果用户然后单击导航栏中的链接并且我想要卸载Home组件,我该怎么做？似乎我唯一的选择是做这样的事情(取自react.js: removing a component),但这看起来非常严重：

render: function () {
  var home = this.state.remove_home ? null : <Home ref="home />
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {home}
      <Footer ref="footer"/>
    </div>
),handleNavbarClick: function () {
  this.setState({remove_home: true});
}

这是做适当的反应方式吗？

是的,你建议的解决方案

render: function () {
  var home = this.state.remove_home ? null : <Home ref="home" />
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {home}
      <Footer ref="footer"/>
    </div>
),handleNavbarClick: function () {
  this.setState({remove_home: true});
}

或多或少是使用React处理此问题的“正确”方法.请记住,渲染的目的是描述组件在任何给定点上的查看方式.接触DOM并执行手动操作,或执行其他类型的命令性工作,如“删除”元素,几乎总是错误的做法.

如果您关心语法,可以考虑内联或提取逻辑：

render: function () {
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {this.state.remove_home ? null : <Home ref="home" />}
      <Footer ref="footer"/>
    </div>
),

要么

render: function () {
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {!this.state.remove_home && <Home ref="home" />}
      <Footer ref="footer"/>
    </div>
),

要么

render: function () {
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {this.renderHome()}
      <Footer ref="footer"/>
    </div>
),renderHome: function() {
  if (!this.state.remove_home) {
    <Home ref="home" />
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!