ReactJS 条件渲染:即使不满足渲染条件也会渲染组件 [英] ReactJS Conditional Rendering: Component being rendered even though rendering conditions are not met

问题描述

上下文:

我只有在直接路由到模态路由时才会遇到这个问题(将链接放在网址栏中并按回车键).

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

<小时>

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

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

<代码>...使成为(){返回(typeof this.props.photoId != '未定义'?<PhotoModal/>:空值)}

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

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

我没有收到任何错误或警告，而且我能够看到 routeParam 实际上是未定义的，但组件并未自行更新.我没有 shouldComponentUpdate() 子句，所以没有什么应该阻止它，特别是因为它知道 prop 的变化.

解决方案

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

将您的代码更新为:

render() {返回 this.props.photoId ?<PhotoModal/>: 空值}

这也将处理检查null、false 和0.

CONTEXT:

I only have this problem when I route directly to a modal route (putting the link in the url bar and pressing enter).

this.props.photoId is actually a this.props.routeParams.photoId that is passed into this component from the parent.

---

When the parent component mounts, it renders out its contents as expected. When a photo on this parent component is clicked,the app routes from myapp.com/parentContainer to myapp.com/parentContainer/:photoId. When this :photoId routeParam is present in the route, it is used to conditionally render a modal component. When a "close" button on the modal is clicked, the app routes back to myapp.com/parentContainer losing the :photoId routeParam, and thus closing the modal.

I am really at a loss. I have been using these patterns to render react components throughout my project without problems however I have a problem in this seemingly non-unique scenario:

...

render(){

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

What I am noticing, is that even though this.props.photoId is undefined, it still renders <PhotoModal/>?

Again, When I route into the parent component and open the modal from the parent component the modal will close as expected, this problem only happens when I route directly to the modal route -when this happens the parent component renders, the modal renders as expected, but when I close the modal and lose the routeParam the modal does not close. This only happens when I route directly to the modal route from an external link / using the url bar. When I start in the parent component the conditional routeParam modal opening/closing functionality works 100% as expected.

I am receiving no errors or warnings, and I am able to see that the routeParam is in fact undefined, yet the component is not updating itself. I have no shouldComponentUpdate() clauses, so nothing should be preventing it especially since it is aware of the prop change.

解决方案

The best way to conditionally render a component in React: https://reactjs.org/docs/conditional-rendering.html

Update your code to:

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

This will also handle checking null, false and 0.

这篇关于ReactJS 条件渲染:即使不满足渲染条件也会渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！