React项目中Bootstrap分页按钮无法显示的问题求助

问题描述 #

我用React.js搭建网站，引入Bootstrap实现分页的Previous和Next按钮，这些按钮本该显示在新闻列表下方，但现在完全不显示。反复检查代码没发现明显问题，附上相关代码，求分析可能原因及解决建议。

相关代码：

import React, { Component } from 'react'
import NewsItem from './NewsItem'
export class News extends Component {
  articles = [
    {
      "source": {
        "id": null,
        "name": "New York Post"
      },
      "author": "News.com.au",
      "title": "Green comet to become visible for first time in 50,000 years - New York Post ",
      "description": "A bright green comet will appear in the night skies above Earth, visible for the first time in 50,000 years.",
      "url": "https://nypost.com/2023/01/10/green-comet-to-become-visible-for-first-time-in-50000-years/",
      "urlToImage": "https://nypost.com/wp-content/uploads/sites/2/2023/01/comet-1.10.23.jpg?quality=75&strip=all&w=1024",
      "publishedAt": "2023-01-10T10:48:00Z",
      "content": "A bright green comet will appear in the night skies above Earth, visible for the first time in 50,000 years.\r\nThe recently discovered comet, which was given the catchy name C/2022 E3 (ZTF), will soar… [+1319 chars]"
    },
    {
      "source": {
        "id": null,
        "name": "CNBC"
      },
      "author": "Jeff Cox",
      "title": "Powell stresses need for Fed's political independence while tackling inflation - CNBC",
      "description": "The central bank leader noted that stabilizing prices requires making tough decisions that can be unpopular politically.",
      "url": "https://www.cnbc.com/2023/01/10/powell-stresses-need-for-feds-political-independence-while-tackling-inflation.html",
      "urlToImage": "https://image.cnbcfm.com/api/v1/image/107176166-1673300395297-gettyimages-1245668489-US-WASHINGTON_DC-FEDERAL_RESERVE-INTEREST_RATES-HIKE.jpeg?v=1673360594&w=1920&h=1080",
      "publishedAt": "2023-01-10T14:00:00Z",
      "content": "Federal Reserve Chairman Jerome Powell on Tuesday emphasized the need for the central bank to be free of political influence while it tackles persistently high inflation.\r\nIn a speech delivered to Sw… [+3037 chars]"
    },
    {
      "source": {
        "id": "nfl-news",
        "name": "NFL News"
      },
      "author": "Dan Hanzus",
      "title": "NFL Power Rankings: 49ers, Bills, Bengals remain on top heading into Super Wild Card Weekend - NFL.com",
      "description": "Who sits atop the NFL Power Rankings heading into the playoffs? With the 2022 regular season in the books, Dan Hanzus provides a full rundown of the league hierarchy, 1-32.",
      "url": "https://www.nfl.com/news/nfl-power-rankings-super-wild-card-weekend-2022-nfl-season",
      "urlToImage": "https://static.www.nfl.com/image/private/t_editorial_landscape_12_desktop/league/icdqcwyuxjktofq07gh7",
      "publishedAt": "2023-01-10T13:49:00Z",
      "content": "The 2022 regular season has, at long last, reached its conclusion. Now it gets really fun.\r\nThe postseason promises drama, and eventual immortality for one team. But before any of that, let's take on… [+514 chars]"
    },
    {
      "source": {
        "id": "reuters",
        "name": "Reuters"
      },
      "author": null,
      "title": "China suspends issuing visas in Japan, S.Korea to retaliate for COVID curbs - Reuters",
      "description": "China suspended issuing short-term visas in South Korea and Japan on Tuesday, after announcing it would retaliate against countries that required negative COVID-19 tests from Chinese travellers.",
      "url": "https://www.reuters.com/world/china/covid-wave-past-its-peak-many-parts-china-state-media-2023-01-10/",
      "urlToImage": "https://www.reuters.com/resizer/kRBo3X-4ZjnEA_x6277R7ZawK_8=/1200x628/smart/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/SOBGVU3KVNKMTCPQ2QWM2U7CTY.jpg",
      "publishedAt": "2023-01-10T13:34:00Z",
      "content": "BEIJING, Jan 10 (Reuters) - China suspended issuing short-term visas in South Korea and Japan on Tuesday, after announcing it would retaliate against countries that required negative COVID-19 tests f… [+5460 chars]"
    }]
  constructor() {
    super();
    this.state =
    {
      articles: this.articles,
      loading: false,
      page: 1
    }
  }

   async componentDidMount()
  {
   let url = 'https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=fed5eeabf2f047de8ccb76cf2b3a3c5c';
   let data= await fetch(url);
   let parsedData = await data.json()
   console.log(parsedData);
    this.setState({articles: parsedData.articles})
  }

  render() {
 
    return (
      <div className="container my-3" >
        <h2>
          NewsNerd- Main headlines
        </h2>
        <div className="row my-3" style={{ height: '30px',}}>
          {this.state.articles.map((element) => {
            return <div className="col-md-4 my-2" key = {element.url}>
              <NewsItem  title={element.title?element.title:""} description={element.description?element.description.slice(0,90):""} imageUrl={element.urlToImage?element.urlToImage:""} newsUrl={element.url?element.url:""} />
            </div>
          })}
        </div>
        <div class="d-flex justify-content-between">
        <button type="button" class="btn btn-dark">Previous</button>
        <button type="button" class="btn btn-dark">Next</button>
       </div>
      </div>
    )
  }
}

export default News

可能原因分析 #

• Bootstrap未正确引入：代码使用了d-flex、btn-dark等Bootstrap类，但如果项目未安装或未正确导入Bootstrap的CSS/JS，会导致样式失效，甚至元素布局异常被隐藏。
• 列表容器高度限制导致遮挡：新闻列表所在的.row设置了固定高度style={{ height: '30px',}}，远小于新闻项实际高度，列表内容溢出后会遮挡下方的分页按钮。
• React类名拼写错误：分页按钮容器和按钮用了class而非React规范的className，可能导致Bootstrap样式无法绑定，元素渲染异常。
• API返回数据异常：若componentDidMount中请求API返回的articles为空或结构错误，可能导致列表渲染混乱，间接挤压或隐藏按钮。

排查解决建议 #

• 验证Bootstrap引入
  • 确认已安装Bootstrap：执行npm install bootstrap
  • 在项目入口文件（如index.js）导入CSS：import 'bootstrap/dist/css/bootstrap.min.css'
  • 若需要JS组件，补充导入：import 'bootstrap/dist/js/bootstrap.bundle.min.js'
• 调整列表容器高度
  • 删除.row的固定高度设置，或改为自动高度：style={{ minHeight: 'auto' }}，避免内容溢出遮挡按钮。
• 修正React类名
  • 将分页区域的class改为className，符合React语法：

    <div className="d-flex justify-content-between">
      <button type="button" className="btn btn-dark">Previous</button>
      <button type="button" className="btn btn-dark">Next</button>
    </div>
    

• 检查API返回数据
  • 在浏览器控制台查看parsedData输出，确认articles数组有效，添加容错处理：

    this.setState({ articles: parsedData.articles || this.articles })
    

• 开发者工具排查元素状态
  • 按F12打开开发者工具，在Elements面板查找分页按钮DOM：
    • 若存在：检查Styles面板，确认是否有display: none、visibility: hidden或被其他元素覆盖（z-index问题）。
    • 若不存在：检查render函数中按钮代码是否被条件渲染隐藏，或存在语法错误。

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