如何处理 map function 中的多个参考

Question

我需要针对 map function 中的所有组件，但我只得到其中的最后一个组件。

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>
          )

Answer 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>
)