反应中道具的条件渲染

Question

我有这 2 个状态，来自 2 个不同的 api 调用一个是'movieList'，一个是'search'，都是电影数组。 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>

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

反应中道具的条件渲染

Conditional render of props in react

javascript

reactjs

react-redux