Question

我是一个非常新的反应者，我正在开发一个显示某些组件的应用程序：

{asset.exists && (
  <SomeComponent/>
 )}

但是，这似乎有点笨拙，我一直遇到这种情况似乎并不是解决问题的最佳方法。

就像下面的例子一样

{user.email == asset.email &&
    <SomeComponent

这是行不通的，因为在命中此代码时未定义用户。我认为ComponentDidMount是正确的解决方案。但是，我无法使其正常运行。我基本上是在寻找解决这种情况的正确方法，或者是确认ComponentDidMount是正确的方法

Answer 1

通过链接&&，可以提供所需数量的支票。例如，检查user是否真实，并检查user.email是否真实，&&检查user.email与asset.email匹配：

{user && user.email && (user.email === asset.email) &&
 // render something
}

考虑到您可能正在进行的复杂验证，您也可以考虑将其移至函数中以将逻辑包含在集中位置

isValidUser(user, asset) {
  return user && user.email && (user.email === asset.email);
}

// ...

// may be without 'this' depending on location of function
{this.isValidUser(user, asset) &&
   // render something
}

希望有帮助！

Answer 2

将在安装组件之前调用render方法。实际上render是包含渲染组件代码的方法。

因此，检查在渲染中使用的componentDidMount中是否存在任何属性是没有意义的。

根据生命周期，componentWillMount将在渲染之前被调用，这是进行此类检查的正确位置。

在您的情况下，请检查componentWillMount中是否存在用户和资产，并根据情况将状态变量设置为true或false。在render方法中使用该状态来渲染您的组件。

例如：

componentWillMount { 
       if (user.email == asset.email) this.setState{flag:true} 
       else this.setState{flag:false} 
     } 
     render() { 
       return( {this.state.flag? <someComponent /> : null} 
     }

如果对象未定义，则加载组件的最佳方法

2 个答案: