Question

我想卸载单个反应组件，该组件属于包含三个组件的父组件。父组件具有此渲染功能：

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});
}

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

Answer 1

是的，您建议的解决方案

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处理此问题的“正确”方法。请记住，render的目的是描述组件在任何给定点上看起来的方式。接触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" />
  }
}

Answer 2

试试这个

int fiveCount = getFiveOfAKind(diceCount);
if ( fiveCount != -1 )
{
}

int fourCount = getFourOfAKind(diceCount);
if ( fourCount != -1 )
{
}

int threeCount = getThreeOfAKind(diceCount);
if ( threeCount != -1 )
{
}

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

2 个答案: