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

Question

I am using React Slick for the slider. I have a Card component for the cards and also I have Slider section where I render the CardList component for the upper card with mapping data from data.json and SlickSlider component for the slider.

I know that I have to add onClick event on the Card component but that's it.

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

The code below may work:

store reference of the slider

const sliderRef = useRef(null);

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

and add click listener on the card component with slickGoTo method ( https://react-slick.neostack.com/docs/api )

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

You can try to add simple button to see if it works

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

You may know how to "forwardRef" to pass the reference of "SlickSlider" to "CardList ".