Question

我有一个提取电影的小应用程序。组件树不是很深。我在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组件的道具属性，因为它需要先映射然后再将... props映射到Movie。我似乎无法完成这项工作。

我的应用程序运行良好，但这是“专业钻探”，我认为上下文可能不合适，因为这不是一棵深树。高阶组件，我还不了解。我该怎么做才能使它变得更好？

Movie.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">

Answer 1

您可以这样做：

const Movies = ({ items, ...other}) => {

<Movie {...other} />

或者，

const { items, ...other } = props
<Movie {...other} />

示例中的代码：

const Movies = ({ items, ...other}) => {
   const listItems = items.map((item, id) => (
     <Movie
       key={id}
       id={id}
       {...other}
     />
   ));
   return <ul id="movie-container">{listItems}</ul>;
 };

您的更新使我感到害怕。您需要对所有文件进行解构，否则它将像id={other.id}一样更长。如果您觉得不错，那就这样做：

const { items, ...other } = props
// now when you use other props like imdbid
imdbid={other.imdbid}

如何组成一个更好的React列表容器组件？

1 个答案: