我有一个获取电影的小应用程序。组件树不是很深。我在 App.js 中有状态，它将数据传递给 Movies.js 组件。现在，Movies.js 只是渲染电影 ul 列表的容器。

App.js 将数据传递给电影

<Movies
  modalData={this.state.modalData}
  toggleModal={this.openModal}
  isOpen={this.state.modalIsOpen}
  closeModal={this.closeModal}
  items={this.state.data}
  getMovieInfo={this.getMovieInfo}
  addToFavorites={this.addToFavorites}
/>

Movies.js

const Movies = props => {
   const { items, getMovieInfo, addToFavorites, isOpen, toggleModal, closeModal, modalData } = props;
   const listItems = items.map((item, id) => (
     <Movie
       key={id}
       id={id}
       imdbID={item.imdbID}
       title={item.Title}
       poster={item.Poster}
       getMovieInfo={getMovieInfo}
       addToFavorites={addToFavorites}
       imdbid={item.imdbID}
       isOpen={isOpen}
       toggleModal={toggleModal}
       closeModal={closeModal}
       modalData={modalData}
     />
   ));
   return <ul id="movie-container">{listItems}</ul>;
 };

最后是 Movies.js，它只是在 Movie 组件中呈现的一个项目。我尝试使用解构来保留 Movies 组件的 items props，因为它需要将其映射过来，然后将 ...props 映射到 Movies。我似乎无法完成这项工作。

我的应用程序运行良好，但这是“支柱钻孔”，我认为上下文可能不合适，因为这不是一棵深树。高阶组件，我还不明白。我能做些什么来改善这种情况？

电影.js

const Movie = props => {
  const {
    id,
    imdbID,
    title,
    poster,
    getMovieInfo,
    addToFavorites,
    isOpen,
    toggleModal,
    closeModal,
    modalData,
  } = props;
  return (
    <React.Fragment>
      <li className="movie" id={id}>
        <img srcSet={poster} alt={title} imdbid={imdbID} />
        <div className="movie-title">{title}</div>
        <div className="button-container">
          <button
            type="submit"
            className="button-small"
            onClick={toggleModal}
            imdbid={imdbID}
            title={title}
            id={id}>
            {' '}
            Info!!
          </button>
          <button
            type="submit"
            className="button-small"
            onClick={addToFavorites}
            imdbid={imdbID}
            id={id}>
            {' '}
            Fav
          </button>
        </div>
      </li>
      <Modal className="modal" selector="#modal-root" isOpen={isOpen} onClick={closeModal}>
        <div className="modal-1">