如何编写更好的 React 列表容器组件? [英] How do I compose a better React list container component?

问题描述

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

App.js 向电影传递数据

<电影modalData={this.state.modalData}toggleModal={this.openModal}isOpen={this.state.modalIsOpen}closeModal={this.closeModal}项目={this.state.data}getMovieInfo={this.getMovieInfo}addToFavorites={this.addToFavorites}/>

电影.js

const Movies = props =>{const { items, getMovieInfo, addToFavorites, isOpen, toggleModal, closeModal, modalData } = props;const listItems = items.map((item, id) => (<电影键={id}id={id}imdbID={item.imdbID}标题={项目.标题}海报={item.海报}getMovieInfo={getMovieInfo}addToFavorites={addToFavorites}imdbid={item.imdbID}isOpen={isOpen}toggleModal={toggleModal}closeModal={closeModal}modalData={modalData}/>));return 
{listItems}
;};

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

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

电影.js

const Movie = props =>{常量{ID，imdbID，标题，海报，获取电影信息，添加到收藏夹，开了，切换模态，关闭模态，模态数据，} = 道具;返回 (<React.Fragment>
<img srcSet={poster} alt={title} imdbid={imdbID}/><div className="movie-title">{title}</div><div className="button-container"><按钮类型=提交"className="button-small"onClick={toggleModal}imdbid={imdbID}标题={标题}id={id}>{' '}信息！！<按钮类型=提交"className="button-small"onClick={addToFavorites}imdbid={imdbID}id={id}>{' '}收藏夹

<Modal className="modal" selector="#modal-root" isOpen={isOpen} onClick={closeModal}><div className="modal-1">

解决方案

你可以这样做:

const Movies = ({ items, ...other}) =>{<电影{...其他}/>

或者，

const { items, ...other } = props<电影{...其他}/>

示例中的代码:

const Movies = ({ items, ...other}) =>{const listItems = items.map((item, id) => (<电影键={id}id={id}{...其他}/>));return 
{listItems}
;};

<小时>

你的更新让我害怕.你需要解构所有，否则它会像 id={other.id} 一样变得更长.如果你觉得它更好，那就做:

const { items, ...other } = props//现在当你使用像 imdbid 这样的其他道具时imdbid={other.imdbid}

I have a small app fetching Movies. The component tree isn't very deep. I have state in App.js and it passes data to the Movies.js component. Now, Movies.js is just a container to render the ul list of Movies.

App.js passing data to Movies

<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>;
 };

and finally Movies.js which is just an item that is rendered in the Movie component. I tried using destructuring to keep the items prop for the Movies component because it needs that to map over and then ...props to Movie. I cant seem to make this work.

My app works fine but this is 'prop-drilling' and I think context may not be appropriate because this is not a deep tree. Higher Order Components, I don't understand yet. What can I do to make this better?

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

解决方案

You can do like:

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

<Movie {...other} />

Or,

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

Your code in example:

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

---

Your update made me afraid. You need to destructure all otherwise it will go even longer like id={other.id}. If you feel it's good rather, then do:

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

这篇关于如何编写更好的 React 列表容器组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！