Javascript ReactJS条件渲染：即使不满足渲染条件也要渲染组件

上下文：

我只有在将直接路由到模式路由时才会出现此问题（将链接放入url栏并按enter键）

this.props.photoId

实际上是从父级传递到此组件的

this.props.routeParams.photoId

---

当父组件装载时，它会按预期呈现其内容。单击此父组件上的照片时，应用程序将从

myapp.com/parentContainer

路由到

myapp.com/parentContainer/：photoId

。当路由中存在此

：photoId

routeParam

时，它用于有条件地渲染模态组件。当点击模式上的“关闭”按钮时，应用程序返回到

myapp.com/parentContainer

，丢失

：photoId

routeParam，从而关闭模式

我真是不知所措。在整个项目中，我一直在使用这些模式来呈现react组件，没有任何问题，但是在这个看似不独特的场景中，我遇到了一个问题：

...

render(){

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

。。。
render（）{
返回(
typeof this.props.photoId！=“未定义”
?
:
无效的
)
}

我注意到的是，即使

this.props.photoId

是

未定义的

，它仍然呈现

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

---

我没有收到任何错误或警告，并且我能够看到

routeParam

实际上是未定义的，但是组件没有自我更新。我没有

shouldComponentUpdate（）

子句，因此不应该阻止它，特别是因为它知道属性更改。

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

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

---

在React中有条件地呈现组件的最佳方法：

将代码更新为：

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

render（）{
返回this.props.photoId？：null
}

---

这还将处理检查

null

、

false

和

0

可能未定义，而不使用引号添加

控制台.log（typeof This.props.photoId）

到

渲染
。可能您无意中将
photoId
转换为字符串，而prop值是字符串
“undefined”
，而不是
undefined
。不，这不是问题所在，即使我使用了一些其他约定routeParam发送方法，例如if（this.props.someRouteParam），它仍然不起作用。尽管如此，当我从父级传入时，我的条件语句仍在工作，只有当我使用routeParam直接路由到modal时，它才不工作work@connected_user当变量未定义时，javascript将未定义的赋值给它。undefined本身就是一个javascript全局变量。在比较过程中，不应引用未定义的。您正在比较未定义的内容，就像它是一个字符串一样。删除undefined中的引号并测试您的代码。@我会尝试一下，但如果是这样，为什么我的条件语句工作得很好？如果我不是直接从父组件/路由路由路由而来？typeof this.props.photoId返回stringSorry对于这个错误。谢谢你的批改。：）@我已经试过了，但还是没有骰子。我最初发布的方式、这种方式以及所有其他常见的条件语句都在从父组件传入时起作用。当我直接路由到有问题的路由时，它们不起作用，路由参数。。。它确实有效，只是当我“关闭”模态并将路径返回到基本路径时，模态组件保持渲染状态，即使道具正在更改。