Question

背景：

当我将直接路由到模态路线时（将链接放在网址栏并按回车键），我才遇到此问题。

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()条款，所以没有什么可以阻止它，特别是因为它知道道具变化。

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的检查。

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

2 个答案: