分页不应该在 ReactJS 中的每个视图中呈现吗？

Question

我有 2 个组件 1) 内容 2) 分页

当我点击查看统计信息按钮（见屏幕截图）时，rendermatchinfo() 方法被调用，它显示单个匹配的详细信息，还显示不应显示的分页。分页必须仅显示在主页上，其中内容组件呈现所有匹配项的匹配详细信息，而不是单个匹配项。

content.js：

import React, { Component } from 'react';
import Matchinfo from './matchinfo';
import './content.css';

class Content extends Component {

    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true,
      callmatchinfo: false,
        matchid:''
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res,
        loading:false
      });
    })
    }

  viewstats(matchid){
    this.setState({
        callmatchinfo: true,
        matchid: matchid
    });
  }

  rendermatchinfo(){
    return <Matchinfo matchid={this.state.matchid} />
  }

    renderMatches() {
        return this.state.matches.slice(this.props.start, this.props.end).map(match => {
            return (
                <div className="col-lg-3">
                    <div id="content">
                        <p className="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div className="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div className="stats">
                            <button type="button" onClick= {()=>{this.viewstats(match.id)}} className="btn btn-success">View Stats</button>
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {

        if (this.state.loading) {
            return <div>Loading...</div>
      }
      else if(this.state.callmatchinfo){
        return <Matchinfo match_id={this.state.matchid} />
    }

    return (
      <div>
          <div className="row">
            {this.renderMatches()}
              </div>
          <div className="row">
            {this.state.callmatchinfo ? this.rendermatchinfo() : ''}
          </div>
      </div>
    );
  }
}

export default Content;

分页.js：

import React, { Component } from 'react';

class Pagination extends Component {

    handleClick(val){
    this.setState({
        end:val*16,
        start:end-16
    });
    const end = val*16;
    this.props.onChange(end - 16, end);
    }

  render() {

    return (
      <div>
        <div className="container">                 
              <ul className="pagination">
                <li><a href="#" onClick={this.handleClick.bind(this, 1)}>1</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 2)}>2</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 3)}>3</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 4)}>4</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 5)}>5</a></li>
              </ul>
          </div>
      </div>
    );
  }
}

export default Pagination;

分页和内容组件导入布局组件中。

layout.js：

import React, { Component } from 'react';
import Pagination from './pagination';
import Content from './content';

class Layout extends Component {
    constructor(props){
        super(props);
        this.state = {
        start:0,
        end:16,

        };
    }

    onChangePagination = (start, end) => {
        this.setState({
          start,
          end
        });
    };



    render() {

    const {start, end} = this.state;
    return (
      <div>
          <Content start={start} end={end}/>
          <Pagination onChange={this.onChangePagination}/>
      </div>
    );
  }
}

export default Layout;

截图：

显示分页的主页：

当我点击任何特定匹配的查看统计按钮时，它仍然显示分页，但它不应该显示它。

Answer 1

将Pagination 移动到Content 组件

Layout.js

import React, { Component } from 'react';
import Content from './content';

class Layout extends Component {

    render() {
        return (
            <div>
                <Content />
            </div>
        );
    }
}

export default Layout;

Content.js

import React, { Component } from 'react';
import Matchinfo from './matchinfo';
import './content.css';
import Pagination from './pagination';


class Content extends Component {

    constructor(props) {
        super(props);
        this.state = {
            matches: [],
            loading: true,
            callmatchinfo: false,
            matchid: '',
            start: 0,
            end: 16,
        };
    }


    componentDidMount() {
        fetch('api/matches')
            .then(res => res.json())
            .then(res => {
                console.log(res)
                this.setState({
                    matches: res,
                    loading: false
                });
            })
    }

    onChangePagination = (start, end) => {
        this.setState({
            start,
            end
        });
    };

    viewstats(matchid) {
        this.setState({
            callmatchinfo: true,
            matchid: matchid
        });
    }

    rendermatchinfo() {
        return <Matchinfo matchid={this.state.matchid} />
    }

    renderMatches() {
        return this.state.matches.slice(this.state.start, this.state.end).map(match => {
            return (
                <div className="col-lg-3">
                    <div id="content">
                        <p className="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div className="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div className="stats">
                            <button type="button" onClick={() => { this.viewstats(match.id) }} className="btn btn-success">View Stats</button>
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {

        if (this.state.loading) {
            return <div>Loading...</div>
        }
        else if (this.state.callmatchinfo) {
            return <Matchinfo match_id={this.state.matchid} />
        }

        return (
            <div>
                <div className="row">
                    {this.renderMatches()}
                    {!this.state.callmatchinfo && <Pagination onChange={this.onChangePagination} />}
                </div>
                <div className="row">
                    {this.state.callmatchinfo ? this.rendermatchinfo() : ''}
                </div>
            </div>
        );
    }
}

export default Content;

Answer 2

您应该从 Layout 组件中删除 Pagination 组件。内容组件可以重命名为匹配组件。在 Matches 组件中，显示 Pagination 组件。

点击查看统计时，显示 MatchInfo 组件并隐藏 Matches 和 Pagination 组件。