Блог

В моей функции handleClick я добавляю фильм в новый массив. Тем не менее, я также хочу одновременно изменить отображаемый текст.

Например, вот моя функция, которая добавляет фильм в список наблюдения.

   const addFavoriteMovie = (movie) => {
    const newFavoriteList = [...favorites, movie];
    setFavorites(newFavoriteList);
    saveToLocalStorage(newFavoriteList);
  };
 

И как оно возвращается:

 <div className='row'>
        <MovieList
          movies={movies}
          handleFavoritesClick={addFavoriteMovie}
          favoriteComponent={AddFavorites}
        />
      </div>
 

Вот мой компонент AddFavorites.

 import React from 'react';

const AddFavorite = () => {
  return(
    <React.Fragment>
    <div className="AddToList">
      <span className='mr-2'> Add to Watchlist</span>
      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="red" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
      </svg>
      </div>
    <div className="Added">
    <span className='mr-2'> Added to Watchlist</span>
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="red" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
    </svg>
    </div>
    </React.Fragment>
    );
};

export default AddFavorite;
 

Я хочу, чтобы AddToList div отображался по умолчанию, а при нажатии я хочу, чтобы он отображал добавленный div.

Все фильмы отображаются через мой список фильмов:

 import React from 'react';

const MovieList = (props) => {
  const FavoriteComponent = props.favoriteComponent;

  return (
    <React.Fragment>
      {props.movies.map((movie, index) => (
        <div className='image-container d-flex justify-content-start m-3'>
          <img src={movie.Poster} alt='movie'></img>

          <div
            onClick={() => props.handleFavoritesClick(movie)}
            className='overlay d-flex align-items-center justify-content-center'>
            <FavoriteComponent />
          </div>
        </div>
      ))}
    </React.Fragment>
  );
};

export default MovieList;
 

Нужно ли мне создавать отдельную функцию handleclick для замены divs? Или я могу отредактировать свою функцию addFavoriteMovie, чтобы также включить переключатель div? Или решение — это какой-то обходной метод, например, создание инструкции if о том, был ли фильм выбран или нет?

Предполагая, что у вас есть 2 дочерних компонента, которые вы хотите условно отобразить, вы можете использовать следующий способ для запуска другого компонента.

 const Component = () => {
   
    const [ active, setActive ] = useState(false)


    return (<div>
       <button onClick={() => setActive(!active)}> Toggle Me </button>
       { active ? <ChildComponent1 /> : <ChildComponent2 /> }
    </div>)    

}
 

Когда вы нажимаете кнопку, она переключает «активное» состояние true / false, и вы отображаете разные компоненты в зависимости от того, является ли это true / false.