如果反应嵌套渲染

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(() => {

    async function done....

    setLoadImg(false);

}, [])

...    {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 = () => {

  const [people, setPeople] = useState([]);

  const [films, setFilms] = useState([]);

  const [favorite, setFavorite] = useState([]);

  const [load, setLoad] = useState({favorite: false, page: true });

  const [page, setPage] = useState({next: {}, previous: {}})

  useEffect(() =>{

    (async () => {

      const data = await fetchData(API_URL) 

      const people = await fetchData(data.people)

      const films = await fetchData(data.films)

      setPeople(people.results);

      setFilms(films.results);

      setPage({next: people.next, previous: people.previous});

      setLoad({page: false});

    })()    

  }, [])

  async function fetchData(url) {

    const response = await fetch(url);

    return response.json();

  };

  const getPersonMovie = item => films.filter(film => item.films.includes(film.url))

  const onClick = URL => {

    setLoad({page: true});

    if(URL !== null) {

      fetchData(URL)

        .then(res => {

          setPeople(res.results);

          setPage({next: res.next, previous: res.previous});

          setLoad({page: false});

        })

    }

  }

  const addRemoveFavorite = (item) => {

    if(favorite.includes(item)) {

      const newArr = favorite.filter(el => el !== item)

      setFavorite(newArr);

    } else {

      setFavorite([...favorite, item])

    }

  }

  const loadPage = el => {

    setLoad({favorite: el});

  }

  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}

       />

       </>

    }

    </>  

  )

}

export default App;