在React-bootstrap中分頁表

Question

我正在嘗試使用react-bootstrap對表進行分頁。 為此，我在下面創建了一個頁面。 但是，我沒有在文檔中看到分頁組件，而是在單獨的行上看到一堆<li>標簽，分別是“ <<”，“ <”，“ 1”，“ 2”，“>，“>”，“ >>”。

同樣，當我單擊下一步按鈕或頁面按鈕，而不是在handleSelection的eventKey中獲取數字時，我將獲得整個事件對象。 環顧四周，例如： https ： //www.codereviewvideos.com/course/pagination-filtering-and-sorting/video/react-pagination-part-1和https://react-bootstrap.github.io/components。 html＃pagination ，似乎react-bootstrap返回一個數字。 在示例文檔中，所有列表項都定義了href。 但是，我的組件卻沒有，為什么它沒有為頁面按鈕設置正確的鏈接？

- 更新 -
我需要從以下網址下載樣式： https ://getbootstrap.com/docs/3.3/customize/以獲取適用於.paginate和.paginate-md的樣式

為什么我的案例的React Bootstrap樣式和鏈接失敗？

export default class MyPage extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        activePage: 1
    };
    this.handleSelect = this.handleSelect.bind(this);
}

handleSelect(eventKey) {
    console.log('handle select', eventKey);
    this.setState({
      activePage: eventKey,
    });
}

getPaginatedTable() {
    var dataRows = Globals.Data["dataList"]; 
    const totalPages = Math.ceil(dataRows.length/PER_PAGE_SIZE);
    var startOffset = (this.state.activePage-1) * PER_PAGE_SIZE;
    var startCount = 0;
    return (
        <div id="dataTableDiv">
            <table>
                <thead>
                   //mycolumns
                </thead>
                <tbody>
                    {   dataRows.map((dataRow, index) => {
                            if(index >= startOffset && startCount < PER_PAGE_SIZE){
                                startCount++;
                                return (<DataRowDisplay key={index} Data={data} />);
                            }
                        })
                    }
                </tbody>
            </table>
            <Pagination bsSize="medium"
                prev
                next
                first
                last
                ellipsis
                boundaryLinks
                items={totalPages}
                maxButtons={MAX_PAGE_SIZE}
                activePage={this.state.activePage}
                onSelect={this.handleSelect}
            />
        </div>
    );
}


render() {
    return (
        <div>
            {this.getPaginatedTable()}
        </div>
    );
}

Answer 1

這兩個問題是：1.未添加ReactBootstrap樣式。2.分頁組件未正確生成頁面鏈接。

1. 需要從https://getbootstrap.com/docs/3.3/customize/或https://react-bootstrap.github.io/getting-started.html#install樣式表下載並添加所需的CSS。

2. 我使用的是舊版本的軟件包，它需要提取最新的NPM。