Javascript 如何在贴图函数中处理多个参照

我需要针对map函数中的所有组件，但我只获取其中的最后一个组件

products?.map((product, i) => (
            <div
              key={product.id}
              className="product__card"
              onMouseEnter={() => sliderRef.current.slickNext()}
              onMouseLeave={() => sliderRef.current.slickPause()}
            >
              <StyledSlider {...settings} ref={sliderRef}>
                {product.assets.map(({ url, id, filename }) => (
                  <div className="product__image__container" key={id}>
                    <img src={url} alt={filename} />
                  </div>
                ))}
              </StyledSlider>
              <div className="product__content__container">
                <h3 className="slim__heading">{valueChopper(product.name, 23)}</h3>
                <p contentEditable="true" dangerouslySetInnerHTML={{ __html: valueChopper(product.description, 30) }} />
                <h6 className="slim__heading">Rs. {product.price.formatted}</h6>
              </div>
            </div>
          )

products？.map（（产品，i）=>(
sliderRef.current.slickNext（）}
onMouseLeave={（）=>sliderRef.current.slickPause（）}
>
{product.assets.map（{url，id，filename}）=>(
))}
{valueChopper（product.name，23）}

Rs.{product.price.formatted}
)

最简单的方法是使用一个

ref

以多个元素为目标。请参见下面的示例。我已修改了您的代码以使其正常工作

const sliderRef = useRef([]);

products?.map((product, i) => (
  <div
    key={product.id}
    className="product__card"
    onMouseEnter={() => sliderRef.current[i].slickNext()}
    onMouseLeave={() => sliderRef.current[i].slickPause()}
  >
    <StyledSlider {...settings} ref={el => sliderRef.current[i] = el}>
      {product.assets.map(({ url, id, filename }) => (
        <div className="product__image__container" key={id}>
          <img src={url} alt={filename} />
        </div>
    ))}
    </StyledSlider>
    <div className="product__content__container">
      <h3 className="slim__heading">{valueChopper(product.name, 23)}</h3>
      <p contentEditable="true" dangerouslySetInnerHTML={{ __html:valueChopper(product.description, 30) }} />
      <h6 className="slim__heading">Rs. {product.price.formatted}</h6>
    </div>
  </div>
)

常量sliderRef=useRef（[]）； 产品？.map（（产品，i）=>( sliderRef.current[i].slickNext（）} onMouseLeave={（）=>sliderRef.current[i].slickPause（）} > sliderRef.current[i]=el}> {product.assets.map（{url，id，filename}）=>( ))} {valueChopper（product.name，23）}

Rs.{product.price.formatted} )

---

这是否回答了您的问题？