在React-bootstrap

Question

我正在尝试使用react-bootstrap对表进行分页。为此，我在下面创建了一个页面。但是，我没有看到文档中的分页组件，而是看到“＆lt;＆lt;”，“＆lt;”的一堆<li>标签“1”，“2”，“＆gt;”，“＆gt;＆gt;”分开的。

当我单击下一个按钮或页面按钮而不是在我的handleSelect的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的样式

为什么反应引导样式和链接在我的情况下失败？

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。