如何在其子组件之前安装包装器组件？答案

【问题标题】：How can I make a wrapper component mount before its child components?如何在其子组件之前安装包装器组件？
【发布时间】：2017-09-25 06:36:59
【问题描述】：

我正在尝试创建一个包装器，如果用户未通过身份验证，则该包装器不会挂载子级。否则，它会挂载并渲染子组件。大致是这样的：

export class RedirectOnCondition extends Component {
  render(){
     return this.props.isAuthenticated? this.props.children : null
  }
}

我的问题是在父母有机会评估条件之前，孩子仍然会坐骑。只有在子组件的 componentWillMount`（以及任何相关的 API 调用已触发并失败）之后，父组件的渲染才会启动并移除子组件。根据this question，这就是 React 的工作原理。

我怎样才能解决这个问题？

【问题讨论】：

父级如何评估条件？如果用户通过身份验证，您可以将条件的初始值保持为 false 并使其为 true。
条件已通过视图 redux 连接，它正在正确评估，但正如我所说，我的问题是子级在父级渲染之前挂载。我想让父级先渲染
我们需要更多关于你如何实际使用 RedirectOnCondition HOC 以及 this.props.isAuthenticated 是如何进入的信息

标签： javascript reactjs

【解决方案1】：

在第一次渲染中，父组件可能还没有收到处理子组件条件渲染所需的道具。在这种情况下，您可能需要先检查道具是否已经存在。

export class RedirectOnCondition extends Component {
 render(){
   return "isAuthenticated" in this.props ? this.props.isAuthenticated? this.props.children : null : null
 }
}

【讨论】：