条件渲染在reactjs中行为不统一？

编程问答 2022-06-12

问题描述

我过去曾经使用过条件渲染，但是由于某种原因，尽管它们都使用相同的JSON短语和相同类型的条件渲染，但它在这里只在一个元素上起作用，而不在另一个元素上起作用？

JSON数组

// Adob​​e组件数据

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.',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.',Images: ['Mylogo.png'],]

我遇到的问题是“ videoAdress”和“ Images”，我尝试为它们设置未定义的null值，但是对于图像，阻止它们渲染的唯一一件事就是将值设置为[ ]，但这不适用于仍呈现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>
                    })}

我想要的功能是仅当存在存储的地址时才渲染图像和视频，我敢肯定我很想念某些东西，但是仍然有一段时间了。

解决方法

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

var op= Array.from(new Set(obj.map((item: any) => item.name)))

等于这个：

Projects.Images && <Component />

现在，如果对空数组[]执行此操作，则真实值为!!Project.Images && <Component /> 。这意味着TRUE用[]值呈现，而<ReactPlayer />不呈现，因为[] .map（）不在空数组上运行。

要解决此问题，请执行以下操作：

<img />

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

conditional-renderingjsonreact-hooksreactjsreactjsreactjsreactjs