ReactJS分页点击切换对应div的实现方案咨询

Hey there! Let's get that pagination working to switch between your content divs. The main issue here is that your current code isn't tying the active page state to which content section is displayed. Let's walk through how to fix this step by step.

Step 1: Structure Your Page Content as an Array #

First, let's organize all your page-specific content into an array. This makes it easy to grab the right content based on the active page number:

class ProductTheme extends Component {
  constructor(props) {
    super(props);
    // Define your page content array here
    this.pages = [
      // Page 1 content
      (
        <div className="page-content">
          <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>
      ),
      // Page 2 content
      (
        <div className="page-content" 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>
      ),
      // Add more pages here as needed
    ];

    this.state = { 
      activePage: 1, 
      formValues: {}, 
      totalPages: this.pages.length // Use array length instead of hardcoding 10
    };

    // Bind methods if not using arrow functions
    this.handleSelect = this.handleSelect.bind(this);
  }

  // Step 2: Implement the handleSelect method to update active page state
  handleSelect(selectedPage) {
    this.setState({ activePage: selectedPage });
  }

  // Keep your existing handleChange and onSubmit methods here
  handleChange() {
    // Your existing logic
  }

  onSubmit() {
    // Your existing logic
  }

  renderField() {
    // Your existing renderField logic
  }

  render() {
    const { handleSubmit } = this.props;

    return(
      <div>
        <ThemesNavBar/>
        <div className="container" id="PTConatiner">
          <h2>Product Explainer Information</h2>
          
          {/* Step 3: Render the content for the current active page */}
          {this.pages[this.state.activePage - 1]}

          {/* Updated Pagination component */}
          <Pagination 
            prev next first last boundaryLinks 
            items={this.state.totalPages} 
            maxButtons={2} 
            activePage={this.state.activePage} 
            onSelect={this.handleSelect} 
          />
        </div>
      </div>
    );
  }
}

Key Fixes Explained: #

• Content Array: By storing each page's content in an array, we can dynamically pick the right section based on activePage (subtract 1 because array indices start at 0, but your pagination uses 1-based numbering).
• handleSelect Method: This method updates the component's state with the selected page number, which triggers a re-render to show the correct content.
• Dynamic Total Pages: Instead of hardcoding totalPages: 10, we use the length of our pages array to keep pagination in sync with your actual content.
• Conditional Rendering: Instead of rendering all content divs at once, we only render the one matching the current active page.

Why Your Previous NPM Module Attempts Didn't Work #

Most pagination modules just handle the UI for selecting pages—you still need to connect that selection to your component's state and use that state to control which content is displayed. Your original code was rendering all content sections regardless of the active page, so switching pages didn't change what you saw.

内容的提问来源于stack exchange，提问作者hruday kumar reddy