当我们点击分页 ReactJS 时我需要更改一个 div 吗？答案

【问题标题】：i need to change a div when we click on pagination ReactJS?当我们点击分页 ReactJS 时我需要更改一个 div 吗？
【发布时间】：2018-01-14 00:35:22
【问题描述】：

class ProductTheme extends Component{
    constructor(props){
        super(props);
        this.state = { activePage : 1 , formValues: {}, totalPages:10}

    }
    render(){
    const {handleSubmit} = this.props; 
    const page = this.state.totalPages;
        return( 
            <div><ThemesNavBar/>
            <div className="container" id="PTConatiner">
            <h2>Product Explainer Information</h2>
      <div className = "container">
       <form className="form-inline" onSubmit = {handleSubmit(this.onSubmit.bind(this))}>
      <Field label="Meet" value={this.state.formValues["cname"]} onChange={this.handleChange.bind(this, 'svgObject','cname', 'cprofession')} name="cname" component={ this.renderField}/>
      <Field label="He's" value={this.state.formValues["cprofession"]} onChange={this.handleChange.bind(this, 'svgObject','cname', 'cprofession')} name="cprofession" component={ this.renderField}/>
      </form>
      </div>
      <object type="image/svg+xml" ref="svgObject" data={require("./images/svg files/Scene_01.svg")} id='svgObject' ></object>
      <div id="screenPage02">
      <Field label="He's Struggling To" value={this.state.formValues["struggling"]} onChange={this.handleChange.bind(this)} name="struggling" component={ this.renderField}/>
            <object type="image/svg+xml" ref="svgObject01" data={require("./images/svg files/Scene_02.svg")} id='svgObject01' ></object>
      </div>
        {divData.map((data)=>{
          console.log(data);
        })}
             <Pagination
        prev
        next
        first
        last
        boundaryLinks
        items={page}
        maxButtons={2}
        activePage={this.state.activePage}
        onSelect={this.handleSelect.bind(this)}
      />
            </div></div>
            );
    };
};

嗨，当用户点击分页中的特定 no 时，它应该更改为与之相关的 div 如何使用 React 来做到这一点？我查看了一些 NPM 模块，但这些模块对我不起作用？

【问题讨论】：

为什么要更改 div？为什么不能改变当前div的内容？
这可以在状态的帮助下完成，但问题是没有任何模块，就像 jQuery 中有一些函数
你的或某些 lib 的 Pagination 实现是什么？感觉像 activePage 或 onSelect 会给你更新的能力
来自 react-bootstrap

标签： reactjs pagination

【解决方案1】：

我猜你的方法不正确，你不能每次都加载一个新的组件或 div，或者你可以去改变 div 内容，因为页面改变只有内容必须改变，你可以将数据保存在state 并加载第一页所需的数据有限，一旦页面更改，使用该数据槽更改 div。

【讨论】：

你可以参考这个link

【解决方案2】：

您应该将当前页面数据存储在 组件状态 或 Redux 存储 中。

您的源代码太短，无法理解您的情况。我不知道您使用哪个 Pagination 库。

如果您想要类似的源代码检查解决方案： Demo

Github

【讨论】：