通过onClick迭代ReactJS组件

Question

目标是在功能上将其用作滑块/幻灯片。

示例模态组件：

import React, { Component } from 'react';

const Modal_1 = () => {

  return (

    <li id="intro-res-slide" class="active">
        <div>
            <h2>Hi Im Mariah</h2>
        </div>
    </li>

  )

}

export default Modal_1;

演示组件：

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Link,
  Route,
  Switch,
} from 'react-router-dom';


// Modals
import Modal_1 from "./modals/Modal_1.js"
import Modal_2 from "./modals/Modal_2.js"
import Modal_3 from "./modals/Modal_3.js"
import Modal_4 from "./modals/Modal_4.js"
import Modal_5 from "./modals/Modal_5.js"

const _modals = [ Modal_1, Modal_2, Modal_3, Modal_4, Modal_5 ]


const HelperModalRender = (props) => (

  <div class="tool-slides active slideshow">

      <ul>
        {/* ITERATE THROUGH MODALS HERE */}
        { _modals[props.currentSlide] }
      </ul>

      <div
        onClick={props.prevModal}
        className="btn dec"
      ></div>

      <div
        className="btn inc"
        onClick={props.nxtModal}
      ></div>

  </div>

)

export default HelperModalRender;

容器组件：

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Link,
  Route,
  Switch,
} from 'react-router-dom';

import HelperModalRender from './HelperModalRender.js'


class HelperModalContainer extends Component {

  constructor() {
    super();

    this.state = {
      currentSlide: 1,
      slideActive: true
    }

    this.prevModal = this.prevModal.bind(this)
    this.nxtModal = this.nxtModal.bind(this)

  }

  prevModal(){
    var currentSlide = this.state.currentSlide
    this.setState({ currentSlide: currentSlide++ })
  }

  nxtModal(){
    var currentSlide = this.state.currentSlide
    this.setState({ currentSlide: currentSlide-- })
  }

  render() {
    return (
      <HelperModalRender
        active = {this.state.slideActive}
        currentSlide = {this.state.currentSlide}
        prevModal = {this.state.prevModal}
        nxtModal = {this.state.nxtModal}
      />
    )
  }

}

export default HelperModalContainer;

我希望在我的容器组件中有一个函数，它会迭代_modals数组，返回相应的组件 - 但是switch语句不是一个选项而且我很难想到一个替代。

Answer 1

这应该可行，但看起来你的容器组件的render方法有一个错字。尝试将HelperModalRender的currentSlide道具更改为：

currentSlide = {this.state.currentSlide}

您可能还需要在零而不是1处启动幻灯片，以匹配幻灯片组件的数组索引。

Answer 2

意识到这个警告中存在的问题：

This may happen if you return a Component instead of <Component /> from render.

所以我将_modals数组更新为：

const _modals = [ <Modal_1 />, <Modal_2 />, <Modal_3 />, <Modal_4 />, <Modal_5 /> ]