反应中道具的条件渲染答案

【问题标题】：Conditional render of props in react反应中道具的条件渲染
【发布时间】：2022-01-22 11:55:07
【问题描述】：

我有这 2 个状态，来自 2 个不同的 api 调用一个是“movieList”，另一个是“搜索”，两者都是电影数组。 movieList 是自动呈现的，因为它是对流行电影的搜索，并且它对应于用户一打开页面就会显示，在导航栏中，我有一个输入附加到一个名为 search 的状态，它保存了一个匹配的电影数组其中的名称...尝试使用具有以下逻辑的条件，如果搜索存在，则映射搜索，否则映射movieList。但似乎我不知道如何正确地做到这一点。如果有人可以帮助我如何做到这一点，那将对我有很大帮助，非常感谢！这里我留下代码

import { useSelector } from 'react-redux'
import { getAllMovies } from '../../features/movieSlice'
import MovieCard from '../MovieCard/MovieCard';

const MovieListing = ({ movieList, search }) => {


   return (
       
        <div className='' >
            <div className=''>
                <div className='my-20 mx-15 flex flex-wrap justify-around items-center' >
           {
           movieList.map((movie)=>(
              <MovieCard {...movie} key={movie.id}  />
           ))} 
       </div>   
       </div> 
       </div>
   )
}

export default MovieListing```

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案1】：

要进行条件渲染，您可以尝试使用三元运算符：

 <div className='' >
    <div className=''>
        <div className='my-20 mx-15 flex flex-wrap justify-around items-center' >
    {
    search ? search.map((searchItem) => <MapsSearch {...search}/> : 
    movieList.map((movie) => (<MovieCard {...movie} key={movie.id}/>))
    }
       </div>   
    </div> 
</div>

（您只需要修改搜索的映射及其返回的内容，因为我不确定search 是什么类型）

【讨论】：

完成了兄弟！真的很感激