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;

pagination.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

您应该从布局组件中删除分页组件。内容组件可以重命名为Matches组件。在“匹配”组件中，显示“分页”组件。

单击视图统计信息时，显示MatchInfo组件并隐藏匹配和分页组件。

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

2 个答案: