反应中道具的条件渲染

Question

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

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```

Answer 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是什么类型）