如果反应嵌套渲染

Question

嘿，想在渲染方法中做一个嵌套的 if

我的代码：

return(

    <>

    <Logo className='logo' />

    <Menu loadPage={loadPage} />

    {load.favorite ? 

      <Favorite 

        favorite={favorite} 

        addRemoveFavorite={addRemoveFavorite}

        getPersonMovie={getPersonMovie}

      /> 

      :

      <>

      <Card 

        people={people} 

        favorite={favorite} 

        addRemoveFavorite={addRemoveFavorite}

        getPersonMovie={getPersonMovie}

      />

      <Navigate 

        onClick={onClick}

        page={page}

       />

       </>

    }

    </>  

  )

}

我想做一些这样的想法

return(

    <>

    {load.page 

    ? 

    <Img />

    : 

    rest code }

不幸的是，该代码不起作用，我不知道为什么。有人可以帮忙吗？

Answer 1

实际上你的代码会load.page ?改为load.favorite......但你可以清楚地为你想要的东西设置一个钩子......例如：const [loadImg, setLoadImg] = useState(true);useEffect(() => {&nbsp; &nbsp; async function done....&nbsp; &nbsp; setLoadImg(false);}, [])...&nbsp; &nbsp; {loadImg ? <ComponentThis /> : <ComponentThat /> }

Answer 2

import React, {useEffect, useState} from 'react';import API_URL from './config/API_URL';import Card from './components/Card';import Favorite from './components/Favorite';import Menu from './components/Menu';import Navigate from './components/Navigate';import { ReactComponent as Logo} from './logo.svg';import './scss/App.scss';const App = () => {&nbsp; const [people, setPeople] = useState([]);&nbsp; const [films, setFilms] = useState([]);&nbsp; const [favorite, setFavorite] = useState([]);&nbsp; const [load, setLoad] = useState({favorite: false, page: true });&nbsp; const [page, setPage] = useState({next: {}, previous: {}})&nbsp; useEffect(() =>{&nbsp; &nbsp; (async () => {&nbsp; &nbsp; &nbsp; const data = await fetchData(API_URL)&nbsp;&nbsp; &nbsp; &nbsp; const people = await fetchData(data.people)&nbsp; &nbsp; &nbsp; const films = await fetchData(data.films)&nbsp; &nbsp; &nbsp; setPeople(people.results);&nbsp; &nbsp; &nbsp; setFilms(films.results);&nbsp; &nbsp; &nbsp; setPage({next: people.next, previous: people.previous});&nbsp; &nbsp; &nbsp; setLoad({page: false});&nbsp; &nbsp; })()&nbsp; &nbsp;&nbsp;&nbsp; }, [])&nbsp; async function fetchData(url) {&nbsp; &nbsp; const response = await fetch(url);&nbsp; &nbsp; return response.json();&nbsp; };&nbsp; const getPersonMovie = item => films.filter(film => item.films.includes(film.url))&nbsp; const onClick = URL => {&nbsp; &nbsp; setLoad({page: true});&nbsp; &nbsp; if(URL !== null) {&nbsp; &nbsp; &nbsp; fetchData(URL)&nbsp; &nbsp; &nbsp; &nbsp; .then(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setPeople(res.results);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setPage({next: res.next, previous: res.previous});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setLoad({page: false});&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; }&nbsp; const addRemoveFavorite = (item) => {&nbsp; &nbsp; if(favorite.includes(item)) {&nbsp; &nbsp; &nbsp; const newArr = favorite.filter(el => el !== item)&nbsp; &nbsp; &nbsp; setFavorite(newArr);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; setFavorite([...favorite, item])&nbsp; &nbsp; }&nbsp; }&nbsp; const loadPage = el => {&nbsp; &nbsp; setLoad({favorite: el});&nbsp; }&nbsp; return(&nbsp; &nbsp; <>&nbsp; &nbsp; <Logo className='logo' />&nbsp; &nbsp; <Menu loadPage={loadPage} />&nbsp; &nbsp; {load.favorite ?&nbsp;&nbsp; &nbsp; &nbsp; <Favorite&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; favorite={favorite}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; addRemoveFavorite={addRemoveFavorite}&nbsp; &nbsp; &nbsp; &nbsp; getPersonMovie={getPersonMovie}&nbsp; &nbsp; &nbsp; />&nbsp;&nbsp; &nbsp; &nbsp; :&nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <Card&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; people={people}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; favorite={favorite}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; addRemoveFavorite={addRemoveFavorite}&nbsp; &nbsp; &nbsp; &nbsp; getPersonMovie={getPersonMovie}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <Navigate&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; onClick={onClick}&nbsp; &nbsp; &nbsp; &nbsp; page={page}&nbsp; &nbsp; &nbsp; &nbsp;/>&nbsp; &nbsp; &nbsp; &nbsp;</>&nbsp; &nbsp; }&nbsp; &nbsp; </>&nbsp;&nbsp;&nbsp; )}export default App;