在同一页面上动态渲染两个图像轮播

Posted 2023-02-14

【中文标题】在同一页面上动态渲染两个图像轮播

【英文标题】：Render dynamically two image carousels on the same page

【发布时间】：2022-01-20 18:36:31

【问题描述】：

更新

我有一个包含数据的对象数组，其中一个关键是画廊，它是一个 URL 数组：data=[id:1,gallery:[],id:2, galery:[]]。 我在映射的“数据”数组中做了一个图像轮播。问题是每个项目的轮播不是彼此独立的。每次我更改其中一个的图片时，它也会更改为另一个。 这是代码：

export class MyComponent extends Component 
 state = 
        current: 0,
        currentItem: '',        
    
    render() 
 const selecItem = (e) => 
            this.setState(
                currentItem: e.target.parentElement.parentElement.parentElement.id
            )
        

        const resetSelectedItem = ()=>
            this.setState(
                currentItem: ''
            )
        

        const nextSlide = (e ,arr) => 
            if (this.state.currentItem !== 
e.target.parentElement
.parentElement.parentElement.id ) 
                e.preventDefault()
             else  if (arr && 
                this.state.currentItem === e.target.parentElement
.parentElement.parentElement.id ) 
                let copy = this.state.current
                this.setState(
                    current: (copy === arr.length - 1 ? 0 : copy + 1),
                )
            
        

        const prevSlide = (e, arr) => 
            if (this.state.currentItem !== e.target.parentElement
.parentElement.parentElement.id ) 
                e.preventDefault()
             else  if (arr && 
                this.state.currentItem === e.target.parentElement
.parentElement.parentElement.id ) 
                let copy = this.state.current
                this.setState(
                    current: (copy === 0 ? arr.length - 1 : copy - 1),
                )
            
        
       return (
         <section>                
           data &&
              data.map((item, i) =>
                <>
                <div key=i  id=i.toString().concat(item.id)>
                   <div>
                    ...some data here
                   </div>
                   <div>
                      <div>
                         ...more data
                      </div>
                      <div className='carousel'  onMouseEnter=(e)=>selecItem(e)
                            onMouseLeave=resetSelectedItem>
                            <img src=left
                                className='left-arrow' 
                                onClick=(e) =>this.state.currentItem 
=== i.toString().concat(data[i].id) 
                            ? prevSlide(e, data[i].gallery) : undefined />
                            <img src=right
                                className='right-arrow' 
                                onClick=(e) => this.state.currentItem 
=== i.toString().concat(data[i].id) 
                            ? nextSlide(e, data[i].gallery) : undefined />
                            data[i].gallery?.map((img, j) => (
                                <>
                                 j === this.state.current && (
                                  <img src=img alt=item.id className='cart-image' key=j />
                                    )
                                </>
                            ))
                    </div>
                  </div>
               </div>
            </>)
         </section>)
export default MyComponent

我希望数据数组中的每个项目都有一个不同的轮播。目前它就像一个大的，而不是两个。 对我来说，奇怪的是所有其他数据都以我想要的方式呈现。 我也试过这个：

this.state.currentItem === i.toString().concat(data[i].id)? 
 data[i].gallery?.map((img, j) => ( 
                     <>
                       j === this.state.current && (
                         <img src=img alt=item.id className='cart-image' key=j />
                           )
                     </>
                            ))

在这种情况下，它会显示并处于活动状态，只有data 中的一项的轮播。但我希望两个轮播一次都可见且活跃 你能帮帮我吗？ 提前谢谢你

【参考方案1】：

您只需检查库中项目的索引作为显示图像的条件。例如，如果选定的画廊项目为 0，则将显示每个画廊的每个第一个项目。您还需要将活动项目索引与活动画廊项目索引（就像您已经做的那样）一起保存在一个状态中，并将其添加到条件中以显示图像。

【讨论】：

感谢您的回答，但我尝试了您的建议，但并没有解决我的问题。我更新了问题，你能再看一遍吗？

您应该存储一个i 和一个j，这样data[i].gallery[j] 就是活动项目。然后，当您渲染轮播时，您会同时检查 i 和 j 以检查当前项目是否处于活动状态。您不必将其转换为字符串或其他任何内容，只需存储两个布尔值并执行i == this.state.activeI && j == this.state.activeJ 之类的操作（最好使用一些更具描述性的变量名称）。

如果我使用您的解决方案，未激活的轮播将被隐藏。但我希望一次渲染和激活两个轮播。我做了一些研究，我应该为data[i].gallery 使用forEach 循环或for 循环，但我真的不知道如何开始。问题在于prevSlide 和nextSlide 函数。

【参考方案2】：

我做了一个新组件，并将图像轮播的所有逻辑移到了这个组件内。 现在一切正常。 它现在看起来像这样的代码：

export class MyComponent extends Component 
   render() 
     return(
       <section>                
           data &&
              data.map(item=>
             <NewComponent 
               id=item.id
               gallery=item.gallery />
     )
       </section>    
  )