反應中道具的條件渲染

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