所有视图都会呈现分页，但它应该仅在ReactJS的主页上呈现？

我创建了3个组件：

内容

匹配信息

布局

分页

每当我点击view stats按钮，matchinfo组件视图就会呈现，其中显示特定匹配的matchinfo。每当我点击查看统计按钮时（请参见屏幕截图），它也会呈现分页组件，而不应该呈现分页组件。如何修复此问题

组件匹配信息是内容组件的子组件

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;

import React，{Component}来自'React'；
从“/Matchinfo”导入Matchinfo；
导入“/content.css”；
类内容扩展组件{
建造师（道具）{
超级（道具）；
此.state={
匹配项：[]，
加载：对，
callmatchinfo:false，
匹配ID:'
};
}
componentDidMount（）{
获取（'api/匹配项'）
.then（res=>res.json（））
。然后（res=>{
console.log（res）
这是我的国家({
比赛:res,，
加载：错误
});
})
}
viewstats（匹配ID）{
这是我的国家({
callmatchinfo:true，
matchid:matchid
});
}
rendermatchinfo（）{
返回
}
renderMatches（）{
返回this.state.matches.slice（this.props.start，this.props.end）.map（match=>{
返回(
match{match.id}
{match.team1}
VS

{match.team2}
赢家
{match.winner}
{this.viewstats（match.id）}className=“btn btn success”>查看统计信息
);
})
}
render（）{
if（this.state.loading）{
返回加载。。。
}
else if（this.state.callmatchinfo）{
返回
}
返回(
{this.renderMatches（）}
{this.state.callmatchinfo？this.renderMachinfo（）：''}
);
}
}
导出默认内容；

matchinfo.js：

import React, { Component } from 'react';

class Matchinfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            info:[],
            loading:true
        };
    }

    componentWillMount(){
        fetch(`api/match/${this.props.match_id}`)
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        info:res,
        loading:false
      })
    })
    }

  render() {

    if (this.state.loading) {
            return <div>Loading...</div>
    }

    const {info} = this.state;

    return (
      <div>
                         <p className="match">MATCH {info.id}</p>
                        <h4>{info.team1}</h4>
                        <p>VS</p>
                        <h4>{info.team2}</h4>
                        <div className="winner">
                            <h3>WINNER</h3>
                            <h4>{info.winner}</h4>
                        </div>

      </div>
    );
  }
}

export default Matchinfo;

import React，{Component}来自'React'；
类Matchinfo扩展组件{
建造师（道具）{
超级（道具）；
此.state={
信息：[]，
加载：正确
};
}
组件willmount（）{
fetch（`api/match/${this.props.match\u id}`）
.then（res=>res.json（））
。然后（res=>{
console.log（res）
这是我的国家({
信息:res,，
加载：错误
})
})
}
render（）{
if（this.state.loading）{
返回加载。。。
}
const{info}=this.state；
返回(
匹配{info.id}
{info.team1}
VS

{info.team2}
赢家
{info.winner}
);
}
}
导出默认匹配信息；

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;

import React，{Component}来自'React'；
类分页扩展了组件{
handleClick（val）{
这是我的国家({
完:val*16,，
起点：16日结束
});
const end=val*16；
this.props.onChange（end-16，end）；
}
render（）{
返回(







);
}
}
导出默认分页；

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;

import React，{Component}来自'React'；
从“/分页”导入分页；
从“./Content”导入内容；
类布局扩展组件{
建造师（道具）{
超级（道具）；
此.state={
起点：0，
完:16
};
}
onChangePagination=（开始、结束）=>{
这是我的国家({
开始
结束
});
};
render（）{
const{start，end}=this.state；
返回(
);
}
}
导出默认布局；

截图：

单击“查看统计信息”按钮后，仍会显示分页：

---

您应该采用与显示匹配信息相同的方式切换分页。在

this.state

中为您的

Layout

组件保留一个变量，并创建一个方法来控制该

this.state

变量。将该方法传递给您的子组件。下面是一个简单的例子：

class Layout extends Component {
  constructor(props){
    super(props);
    this.state = {
      showPagination: true
    }
  }

  onChangePagination = () => {
    this.setState({showPagination: !this.state.showPagination}) //toggles pagination
  };

  render() {
    return (
      <div>
        {
          this.state.showPagination
          ?
          <Pagination onChangePagination={this.onChangePagination}/>
          :
          <button onClick={this.onChangePagination}>
            show pagination
          </button>
        }

      </div>
    )
  }
}

class Pagination extends Component {
  handleClick() {
    this.props.onChangePagination()
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          toggle pagination
        </button>
      </div>
    )
  }
}

类布局扩展组件{
建造师（道具）{
超级（道具）；
此.state={
显示分页：true
}
}
onChangePagination=（）=>{
this.setState（{showPagination:！this.state.showPagination}）//切换分页
};
render（）{
返回(
{
this.state.showPagination
?
:
显示分页
}
)
}
}
类分页扩展了组件{
handleClick（）{
this.props.onChangePagination（）
}
render（）{
返回(
切换分页
)
}
}

哪个组件正在处理分页？我看不到。@Andrew我已经编辑了我的问题，请看。您从未处理过组件的渲染…@Andrew我正在向布局中的分页传递道具。js@Andrew我如何处理分页组件的呈现，因为不管视图是什么，它总是被呈现。