单击后如何隐藏 React 容器？

如何解决单击后如何隐藏 React 容器？

所以我有一个覆盖 flex 容器，当点击它时会为电影添加提名。如何使它不出现，从而在电影已被提名后不提供单击它的选项？点击事件位于 MovieList 容器中，其中 handleNominationsClick 函数从 props 中取出并将其添加到叠加层的 onClick 属性中。

这是应用程序：

    const [nominations,setNominations] = useState([]);

    const nominateMovie = (movie) => {
        const newNominationList = [...nominations,movie];
        setNominations(newNominationList);
    };

    return (
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListheading heading='Movies' />
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            <div className='row'>
                <MovieList
                    movies={movies}
                    nominationComponent={AddNominations}
                    handleNominationsClick={nominateMovie}
                />
            </div>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListheading heading='Nominations' />
            </div>

电影列表组件：

onst MovieList = (props) => {
    const NominationComponent = props.nominationComponent;

    return (
        <>
            {props.movies.map((movie,index) => (
                <div className='image-container d-flex justify-content-start m-3 col-3 d-flex flex-column'>
                    <img src={movie.Poster} alt='movie'></img>
                    <div
                        onClick={() => props.handleNominationsClick(movie)}
                        className='overlay d-flex align-items-center justify-content-center'
                    >
                        <NominationComponent />
                    </div>
                </div>
            ))}
        </>
    );
};

解决方法

我建议将提名的电影存储在一个对象中，该对象提供 O(1) 查找并将 nominations 作为道具传递给 MovieList，以便可以有条件地呈现叠加层 div。我假设您的 movies 数据有一个 id 属性（或某些唯一标识属性）可以使用。如果您的数据没有唯一标识符，那么我强烈建议您扩充它以包含一个标识符，以便您可以在映射时使用正确的 React 键。

应用

const [nominations,setNominations] = useState({}); // <-- object

const nominateMovie = (movie) => {
    setNominations(nominations => ({
      ...nominations,[movie.id]: true // <-- set movie nomination by id
    }));
};

return (
    <div className='container-fluid movie-app'>
        <div className='row d-flex align-items-center mt-4 mb-4'>
            <MovieListHeading heading='Movies' />
            <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
        </div>
        <div className='row'>
            <MovieList
                movies={movies}
                nominationComponent={AddNominations}
                nominations={nominations} // <-- pass nominations
                handleNominationsClick={nominateMovie}
            />
        </div>

电影列表

const MovieList = (props) => {
  const NominationComponent = props.nominationComponent;

  return (
    <>
      {props.movies.map((movie,index) => (
        <div className='image-container d-flex justify-content-start m-3 col-3 d-flex flex-column'>
          <img src={movie.Poster} alt='movie'></img>
          {!props.nominations[movie.id] && ( // <-- conditional render
            <div
              onClick={() => props.handleNominationsClick(movie)}
              className='overlay d-flex align-items-center justify-content-center'
            >
              <NominationComponent />
            </div>
          )}
        </div>
      ))}
    </>
  );
};