单击后如何隐藏 React 容器？

Question

所以我有一个overlay flex 容器，点击它可以为电影添加提名。我如何使它不会出现，因此一旦电影已经被提名就不会提供点击它的选项？ click 事件位于 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>
            ))}
        </>
    );
};

Answer 1

我建议将提名的电影存储在提供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>
      ))}
    </>
  );
};