如何处理地图函数中的多个参考答案

【问题标题】：how to handle multiple refs inside a map function如何处理地图函数中的多个参考
【发布时间】：2021-08-15 20:13:34
【问题描述】：

我需要定位 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>
          )

【问题讨论】：

这能回答你的问题吗？ How to deal with a ref within a loop?

标签： javascript reactjs

【解决方案1】：

最简单的方法是使用一个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>
)

【讨论】：