react中道具的条件渲染

Question

我有两个状态，来自两个不同的api调用一个是电影列表，另一个是搜索，两者都是电影数组。movieList是自动渲染的，因为它是对流行电影的搜索，它对应于用户一打开页面就显示出来，在导航栏中，我有一个输入附加到一个名为搜索的状态，它保存了一个与名称匹配的电影数组。。。尝试使用具有以下逻辑的条件，如果存在搜索，则映射搜索，否则映射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```

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