条件渲染在 reactjs 中不一致？

Question

我过去使用过条件渲染，但由于某种原因，它在这里对一个元素起作用，但对另一个元素不起作用，尽管它们都使用相同的 JSON 措辞和相同类型的条件渲染？

JSON array

//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 等，但是对于图像来说，唯一阻止它们渲染的东西正在将值设置为 [] 但这对 videoAdress 不起作用，iframe 仍在呈现？

React js code

{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>
                    })}

我想要的功能是仅在存储地址时才呈现图像和视频我确定我遗漏了一些非常愚蠢的东西，但我仍然坚持了一段时间。

Answer 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() 方法，但我猜这是一个错字

条件渲染在 reactjs 中不一致？

conditional rendering not acting uniformly in reactjs?

json

reactjs

conditional-rendering

react-hooks