ReactJS 条件渲染：即使不满足渲染条件也会渲染组件答案

【问题标题】：ReactJS Conditional Rendering: Component being rendered even though rendering conditions are not metReactJS 条件渲染：即使不满足渲染条件也会渲染组件
【发布时间】：2018-04-13 16:38:34
【问题描述】：

上下文：

只有当我将直接路由到模态路由（将链接放在网址栏中并按回车键）时，我才会遇到这个问题。

this.props.photoId实际上是一个this.props.routeParams.photoId，它是从父组件传入这个组件的。

当父组件挂载时，它会按预期呈现其内容。单击此父组件上的照片时，应用程序会从myapp.com/parentContainer 路由到myapp.com/parentContainer/:photoId。当这个:photoId routeParam 出现在路由中时，它用于有条件地渲染一个模态组件。当点击模态框上的“关闭”按钮时，应用会路由回myapp.com/parentContainer，丢失:photoId routeParam，从而关闭模态框。

我真的很茫然。我一直在使用这些模式在整个项目中毫无问题地渲染反应组件，但是在这个看似非独特的场景中我遇到了问题：

...

render(){

  return(
    typeof this.props.photoId != 'undefined'
  ?
    <PhotoModal/>
  :
    null
  )
}

我注意到的是，即使 this.props.photoId 是 undefined，它仍然呈现 <PhotoModal/>？

再次，当我路由到父组件并从父组件打开模态时，模态将按预期关闭，只有当我直接路由到模态路由时才会出现此问题 - 当这种情况发生时父组件呈现，模态按预期呈现，但是当我关闭模态并丢失 routeParam 时，模态不会关闭。仅当我从外部链接/使用 url 栏直接路由到模态路由时，才会发生这种情况。当我在父组件中启动时，有条件的 routeParam 模式打开/关闭功能按预期 100% 工作。

我没有收到任何错误或警告，而且我可以看到 routeParam 实际上是未定义的，但组件并未自行更新。我没有shouldComponentUpdate() 子句，所以没有什么可以阻止它，尤其是因为它知道道具的变化。

【问题讨论】：

不带引号可能未定义
将console.log(typeof this.props.photoId) 添加到render。也许你不小心将photoId 转换为字符串，而prop 值是字符串"undefined" 而不是undefined。
不，不是这样，即使我做了一些其他约定的 routeParam 发送方法，比如 if(this.props.someRouteParam) 它仍然不起作用。话虽如此，当我从父级路由进入时，我的条件语句正在工作，只有当我使用 routeParam 直接路由到模态时，它才不起作用
@connected_user 当变量未定义时，javascript 将 undefined 分配给它。而 undefined 本身就是一个 javascript 全局变量。你不应该在比较期间引用 undefined 。您正在比较 undefined ，就好像它是一个字符串。删除 undefined 中的引号并测试您的代码。
@divine 我会尝试一下，但如果是这种情况，如果我不直接路由而是从父组件/路由路由，为什么我的条件语句可以完美运行？

标签： javascript reactjs react-router

【解决方案1】：

也可以使用它进行类型检查：

typeof this.props.photoId !== 'undefined'

【讨论】：

typeof this.props.photoId 返回字符串
抱歉打错字了。谢谢指正。 :) @神

【解决方案2】：

在 React 中条件渲染组件的最佳方式：https://reactjs.org/docs/conditional-rendering.html

将您的代码更新为：

render() {
  return this.props.photoId ? <PhotoModal /> : null
}

这还将处理检查null、false 和0。

【讨论】：

我试过了，还是没有骰子。我最初发布的方式，这种方式以及所有其他常见的条件语句在从父组件路由时都可以工作。当我使用路由参数直接路由到相关路由时，它们只是不起作用......它确实起作用，只是当我“关闭”模态并路由回基本路由时，模态组件保持不变即使 props 发生变化也会渲染。