如何使用 React 将点击的卡片从上部组件 CardList 显示到 slider 下来？

Question

我正在为 slider 使用React Slick 。 我有卡片的 Card 组件，还有 Slider 部分，其中我使用来自 data.json 的映射数据和 slider.slider.

我知道我必须在 Card 组件上添加 onClick 事件，仅此而已。

const NewSliderSection = () => {

  return (
    <div className='new-slider-section'>
      <CardList />
      <SlickSlider />
    </div>
  )
}

export default NewSliderSection

import React from 'react'
import "./CardList.css"
import { useState, useEffect } from "react";
import Card from '../Card/Card';


const CardList = () => {
  const [cardData, setCardData] = useState([]);

  const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
        setCardData(myJson)
      });   
  }
  useEffect(()=>{
    getData()
  },[])

  return (
    <div className='card-list-container'>
      {cardData.length > 0 && cardData.map((card) => (
        <Card key={card.id} title={card.title} src={card.src}/>
      ))}
      {cardData.length === 0 && <h3>Loading...</h3>}
    </div>
  )
}

export default CardList

import React, { useEffect, useState } from "react";
import Slider from "react-slick";
// import CardList from "../CardList/CardList";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import Card from "../Card/Card";
import "./SlickSlider.css"

const SlickSlider = () => {
  const [cardData, setCardData] = useState([]);

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
  };


  const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
        setCardData(myJson)
      });   
  }
  useEffect(()=>{
    getData()
    console.log(cardData)
  },[])

  return (
    <div className="slick-slider">
      <Slider {...settings}>
        {cardData.map((card) => (
          <Card src={card.src} title={card.title} key={card.id} />
        ))}
        {/* <div>HELLO</div> */}
      </Slider> 
    </div>
  )
}

export default SlickSlider

Answer 1

下面的代码可能有效：

slider 的存储参考

const sliderRef = useRef(null);

<Slider ref={sliderRef} ...>
...
</Slider>

并使用 slickGoTo 方法在卡片组件上添加点击监听器（ https://react-slick.neostack.com/docs/api ）

onClick={()=>{sliderRef.current.slickGoTo(index)}}

您可以尝试添加简单的按钮，看看它是否有效

<button onClick={()=>{sliderRef.current.slickGoTo(3)}}>test</button>

您可能知道如何“forwardRef”将“SlickSlider”的引用传递给“CardList”。