(四)最简单的React教程,开发自己的电影网站:开发列表页页面

avatar

这一节开始开发我们的电影前面网站,我这里就以列表来举例说明

  1. 在TabBar.js里引入List.js
  2. 在List.js里引用Item.js组件
  3. 当点击TabBar.js里的tab时,传个参数给List.js里的一个方法
  4. 在List.js里请求接口,然后将接口数据通过调用子组件(Item.js)里的方法的方式传给子组件供子组件展示

大致思路就是这样的,下面上代码

TabBar.js

import React, { Component } from 'react';
import List from './List';
import './css/TabBar.css';

class TabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: 0,
      tabs: [
        {
          name: "最新",
          tab: "newest"
        },
        {
          name: "国产",
          tab: "china"
        },
        {
          name: "日韩",
          tab: "rihan"
        },
        {
          name: "欧美",
          tab: "oumei"
        },
        {
          name: "综合",
          tab: "complex"
        }
      ]
    }
  }
  changeTab(index) {
    this.setState({
      active: index
    }, () => this.refs.list.changeTab(this.state.tabs[this.state.active].tab))
  }
  render() {
    return (
      <div>
        <div className="tabbar">
          {
            this.state.tabs.map((tab, index) => {
              return <div key={index} onClick={() => this.changeTab(index)} className={index === this.state.active ? 'active' : ''}>{tab.name}</div>
            })
          }
        </div>
        <List ref="list" tab={this.state.tabs[this.state.active].tab} />
      </div >
    );
  }
}

export default TabBar;

List.js

import React, { Component } from 'react';
import Item from './Item';
import axios from 'axios';
import Loading from './Loading';
import './css/List.css';

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      loadmore: false,
      tab: this.props.tab,
      pageNo: 1,
      list: []
    }
  }
  request(tab) {
    axios
      .get("http://localhost:3000/list", {
        params: {
          type: tab,
          pageNo: this.state.pageNo
        }
      })
      .then(({ data }) => {
        this.setState({
          loading: false,
          loadmore: true,
          list: this.state.pageNo === 1 ? data : this.state.list.concat(data),
        }, () => this.refs.item.loadData(this.state.list))
      });
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    this.setState({
      pageNo: this.state.pageNo
    }, () => {
      // 模拟网络延时
      setTimeout(() => {
        this.request(this.state.tab)
      }, 1000);
    })
  }
  loadMore() {
    this.setState({
      loading: true,
      loadmore: false,
      pageNo: this.state.pageNo + 1
    }, () => {
      // 模拟网络延时
      setTimeout(() => {
        this.request(this.state.tab)
      }, 1000);
    })
  }
  changeTab(tab) {
    this.setState({
      tab: tab,
      pageNo: 0,
      list: []
    }, () => {
      this.refs.item.loadData(this.state.list);
      this.loadMore();
    })
  }
  render() {
    return (
      <div>
        <div className="list">
          <Item ref="item" />
        </div>
        {
          this.state.loading
            ? <Loading />
            : null
        }
        {
          this.state.loadmore
            ? <div className="loadmore" onClick={() => this.loadMore()}>加载更多</div>
            : null
        }
      </div>
    );
  }
}

export default List;

Item.js

import React, { Component } from 'react';
import './css/Item.css';

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }
  loadData(list) {
    this.setState({
      list: list
    })
  }
  render() {
    return (
      <div>
        {
          this.state.list.map((value, index) => <div className="item" key={index}>{value.title}</div>)
        }
      </div>
    );
  }
}

export default Item;

至此一个简单的列表页就写好了

0 条评论

目前还没有回答,快来帮帮TA吧!

添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录