ReactJS分页组件显示异常：仅首页需展示分页的技术问询

你的问题根源在于Layout组件无条件渲染了Pagination，它不知道Content当前是在展示比赛列表还是单场详情。我们需要让Layout感知Content的状态变化，从而控制分页的显示/隐藏。

步骤1：让Content向Layout传递状态 #

首先修改Content.js，添加一个回调函数，当用户进入详情页时通知父组件（Layout）：

// Content.js
class Content extends Component {
  // ... 其他代码不变

  viewstats(matchid){
    this.setState({ callmatchinfo: true, matchid: matchid }, () => {
      // 通知父组件：现在进入详情页了
      this.props.onViewStatsChange(true);
    });
  }

  // 如果之后添加返回列表的功能，可新增如下方法
  // backToList() {
  //   this.setState({ callmatchinfo: false }, () => {
  //     this.props.onViewStatsChange(false);
  //   });
  // }

  render() {
    if (this.state.loading) {
      return <div>Loading...</div>
    } else if(this.state.callmatchinfo){
      return <Matchinfo match_id={this.state.matchid} />
    }
    // 当回到列表时，通知父组件
    this.props.onViewStatsChange(false);
    return (
      <div>
        <div className="row">
          {this.renderMatches()}
        </div>
        {/* 注：原代码中此处的rendermatchinfo不会被渲染，因为callmatchinfo为true时已提前return，可移除 */}
      </div>
    );
  }
}

步骤2：在Layout中控制分页显示 #

修改Layout.js，添加状态跟踪是否处于详情页，并根据这个状态决定是否渲染Pagination：

// Layout.js
class Layout extends Component {
  constructor(props){
    super(props);
    this.state = {
      start:0,
      end:16,
      isViewingStats: false // 新增：标记是否在详情页
    };
  }

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

  // 新增：接收Content传递的状态
  onViewStatsChange = (isViewing) => {
    this.setState({ isViewingStats: isViewing });
  };

  render() {
    const {start, end, isViewingStats} = this.state;
    return (
      <div>
        <Content 
          start={start} 
          end={end} 
          onViewStatsChange={this.onViewStatsChange} // 传递回调给Content
        />
        {/* 只有不在详情页时才显示分页 */}
        {!isViewingStats && <Pagination onChange={this.onChangePagination}/>}
      </div>
    );
  }
}

额外修复：Pagination中的代码错误 #

你的Pagination.js里有个变量定义顺序错误，会导致start计算出错，修复如下：

// Pagination.js
handleClick(val){
  const end = val*16; // 先定义end
  const start = end - 16;
  // 注：Pagination无需自己维护状态，因为父组件已管理，可移除内部state
  this.props.onChange(start, end);
}

这样修改后，当你点击"View Stats"进入详情页时，Layout会收到状态变化，自动隐藏分页组件；回到比赛列表时，分页会重新显示。

内容的提问来源于stack exchange，提问作者stone rock