reactjs 服务和表示组件拆分

Posted

技术标签:

【中文标题】reactjs 服务和表示组件拆分【英文标题】:reactjs services and presentation components splitted 【发布时间】:2018-05-13 10:09:49 【问题描述】:

我正在向 reactjs 迈出第一步。我使用 fetch 创建了the movie db API 的服务。我已经完成了列出电影的名称。

我想要做的是拥有一个完全独立的组件。一个连接到 API 的组件和其他组件负责呈现该信息。

现在我在同一个组件中拥有这两种行为:(

谁能帮帮我?

这是我的代码

import React,  Component  from 'react';

const listUrl = 'https://api.themoviedb.org/4/list/5?api_key=a6ebd775daadc2ec23c371e873e20a02&page=1';

class ListingService extends Component 
  constructor(props) 
    super(props);
    this.state = ;
  

  componentDidMount() 
    fetch(listUrl)
      .then((response) => 
        if (!response.ok) 
          throw Error('Network request failed');
        
        return response;
      )
      .then((response) => 
        return response.json();
      )
      .then((response) => 
        this.setState(
          movieName: response.results.map((movie) => 
            return (
              <li key=movie.id>movie.title</li>
            );
          ),
        );
      , () => 
        this.setState(
          requestFailed: true,
        );
      );
  

  render() 
    if (this.state.requestFailed) return <p>Failed!</p>;
    if (!this.state.movieName) return <p>Loading...</p>;
    return (
      <div>
        <h2><ol>this.state.movieName</ol></h2>
      </div>
    );
  

我有一个带有此代码的父组件:

import React from 'react';
import ListingService from '../../services/listing/index';


const List = () => 
  return (
    <div>
      <b>List of movies</b>
      <ListingService />
    </div>
  );
;

export default List;

我应该为此使用 redux 吗?

【问题讨论】:

你不需要 redux。您可以做的最基本的事情就是从ListingService 渲染的内容中创建另一个组件,然后将其状态作为道具传递给新组件。这不是你要问的吗? 【参考方案1】:

最好的办法是制作一个 MovieList 组件,从您的 ListingService 中您可以将电影的道具传递给它。

<MovieList movies=this.state.movieName

与其将 ajax 调用中的电影名称保存为 jsx,不如将它们保存为数组中的字符串。

在您的 MovieList 组件中,通过电影数组映射

const MovieList = props => ( props.movies.map( (movie,i) => ( <ol><li key=i >movie.title</li></ol> ) )

这是一个基本的实现,但您可以扩展它以创建电影对象列表,这样您就可以保存 id 并使键更具体。

【讨论】:

感谢它的工作。我仍然有它只是调用ListingService 的父组件。我在想是否有一种方法可以使用这个父组件来显示电影列表。有意义吗? 您最终会将 List 重构为 Listing Service。您的智能组件将保存所有逻辑,而您的演示组件是显示逻辑的子组件。所以Listing Service是智能的,MovieList是presentation child 谢谢,很好的解释 :) 我明白了

以上是关于reactjs 服务和表示组件拆分的主要内容,如果未能解决你的问题,请参考以下文章

reactjs怎么从外部引入组件

如何将服务器端渲染中的数据从节点传递给reactjs组件

如何在 reactjs/nextjs 中拆分 URL [重复]

ReactJS面试小结

GraphQL 和 ReactJS 状态

如何在所有页面(所有组件)ReactJs 中显示类似用户名的属性? [复制]