条件渲染在 reactjs 中的作用不统一？

Posted 2023-02-22

【中文标题】条件渲染在 reactjs 中的作用不统一？

【英文标题】：conditional rendering not acting uniformly in reactjs?

【发布时间】：2021-01-07 08:57:28

【问题描述】：

我过去曾使用过条件渲染，但由于某种原因，它在此处处理一个元素而不是另一个元素，尽管它们都使用相同的 JSON 措辞和相同类型的条件渲染？

JSON 数组

//Adobe组件数据

export default[
    
        workName: 'Switch up your "Grub" Motiongraphic',
        workDescription: 'This is a motion graphic comparing the environmental and health effects of consuming animal products compared to insects as dietary source of protein.',
        workTech: ['Adobe After effects'],
        videoAddress: ['https://youtu.be/cloat51hzDY'],
        Images: []
    ,

    
        workName: 'Simplyfit concept poster',
         workDescription: 'This is a poster developed explaining the concept of Simplyfit, a fitness application developed as part of my final year project.',
        workTech: ['Adobe Illustrator'],
        videoAddress: [],
        Images: ['SFPoster.jpg'],
    ,

    
        workName: 'Switch up your "Grub" Infographic',
         workDescription: 'This is an infographic developed explaining the benefits of consuming insects as a source of protein.',
        workTech: ['Adobe Illustrator'],
        videoAddress: [],
        Images: ['insectMotiongraphic.png'],
    ,

    
        workName: 'Crunchy Nut Advert spoof',
         workDescription: 'This video was made as a comedic spoof of a Crunchy Nut advert',
        workTech: ['Adobe Premier Pro'],
        videoAddress: ['https://youtu.be/y8S2RUYrLN8'],
        Images: [],
    ,

    
        workName: 'Icons and Designs',
        workDescription: 'These are a selection of logos and icons created by me.',
        workTech: ['Adobe Premier Pro'],
        videoAddress: [],
        Images: ['Mylogo.png'],
    ,
    
]

我遇到的问题是“videoAdress”和“Images”，我尝试为它们设置空值 undefined 等，但对于图像，唯一阻止它们渲染的是将值设置为 [ ] 但这不适用于仍然呈现 iframe 的 videoAdress？

反应js代码

Data.map((Projects, index) => 
                        return <div className='Cards'>
                            <Carousel showThumbs=false infiniteLoop=true swipeable=false emulateTouch=false showStatus=false autoPlay=slideShow dynamicHeight=false>
                                Projects.Images && Projects.Images.map((Image, index) =>  return <div className='image-iframeContainer'><img src=require("../assets/Port-images/Adobe/" + Image) /></div> )
                                Projects.videoAddress && <div className='image-iframeContainer'><ReactPlayer url=Projects.videoAddress muted=false controls=false onPlay=autoplayChange onPause=autoplayChange onEnded=autoplayChange /></div>
                            </Carousel>
                            Projects.webAddress && <div className='webButton'><LinkIcon onClick=   () => window.open(Projects.webAddress);/></div>
                            <h1>Projects.workName</h1>
                            Projects.workTech.map((Tech, index) =>  return <p className='techList'>Tech</p> )
                            <div className='descriptionContainer'>
                                <p className='description'>Projects.workDescription</p>
                            </div>
                        </div>
                    )

我想要的功能是仅在有存储地址的情况下才呈现图像和视频>

【参考方案1】：

条件渲染通过将条件转换为真值来工作。例如：

Projects.Images && <Component />

等于：

!!Project.Images && <Component />

现在，如果您对空数组 [] 执行此操作，则真值为 TRUE。这意味着 <ReactPlayer /> 使用 [] 值呈现，而 <img /> 未呈现，因为 [].map() 不在空数组上运行。

要解决此问题，请改为：

Projects.Images && Projects.Images.length > 0 && Projects.Images.map((Image, index) => 
  return <div className='image-iframeContainer'>
    <img src=require("../assets/Port-images/Adobe/" + Image) />
  </div>
) 

Projects.videoAddress && Projects.videoAddress.length > 0 &&
<div className='image-iframeContainer'>
  <ReactPlayer url=Projects.videoAddress[0] muted=false controls=false onPlay=autoplayChange onPause=autoplayChange onEnded=autoplayChange />
</div>

我注意到您的 videoAddress 没有使用 map() 方法，但我想这是一个错字

【讨论】：

不是错别字，哈哈，我不敢相信我这么愚蠢竟然忽略了这么久！谢谢 它只需将地图功能添加到视频中即可，您能解释一下原因吗？当然它应该呈现真或假，条件语句中包含的内容不应该重要吗？

如果你在 React [] && <Component /> 中这样做，它将渲染组件，因为 [] 是一个真实的值。你可以在这里阅读更多：sitepoint.com/javascript-truthy-falsy

您使用地图是因为 [] && [].map() 通过了第一次检查 [] 并且 map() 不在空数组上运行

但是如果我删除条件元素它仍然呈现但空白？你明白我为什么困惑了吗？

关于视频地址？它仍然在空数组上使用 map() 方法呈现空白？