ReactJS 条件渲染：即使不满足渲染条件，组件也会被渲染

Question

背景：

只有当我直接路由到模态路由（将链接放在网址栏中并按 Enter 键）时才会出现此问题。

this.props.photoId

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

this.props.routeParams.photoId

。

---

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

myapp.com/parentContainer

路由到

myapp.com/parentContainer/:photoId

。当路径中存在此

:photoId

routeParam

时，它用于有条件地渲染模态组件。单击模态上的“关闭”按钮时，应用程序会路由回

myapp.com/parentContainer

，丢失

:photoId

路由参数，从而关闭模态。

我真的很茫然。我一直在使用这些模式在整个项目中渲染反应组件，没有出现任何问题，但是在这个看似不独特的场景中我遇到了问题：

...

render(){

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

我注意到的是，即使

this.props.photoId

是

undefined

，它仍然呈现

<PhotoModal/>

？

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

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

routeParam

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

shouldComponentUpdate()

子句，所以没有什么可以阻止它，特别是因为它知道道具的变化。

Answer 1

也用它来进行类型检查：

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

Answer 2

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

将您的代码更新为：

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

这还将处理检查

null

、

false

和

0

。

Answer 3

事实上，这是一个非常奇怪的 React/React Router bug，到 2024 年仍然存在。如果您直接导航到子路由的 URL（即在另一个路由的组件中定义的路由），就会发生这种情况。 在这种情况下，将渲染子路由的所有条件渲染组件，而不考虑定义的条件。

解决方法是将渲染条件移动到子路由的组件内：

const PhotoModal = () => {
  //...all useState/useEffect/etc. goes here...
  if(someReasonNotToRender) { return (<></>); }

  // normal rendering logic here...
}