react

import React, { useRef } from "react"

import "./index.css"

import HYAppbar from "@/components/app-bar/app-bar"

import Carousel from "./conponent/carousel"

import { useEffect } from "react"

import { useStore } from "@/store/index"

import { observer } from "mobx-react-lite"

const HYalbum = (props) => {

  console.log(props)

  const teamRef = useRef(null)

  const { Album } = useStore()

  useEffect(() => {

    console.log(teamRef)

    Album.getList()

    console.log(Album.list)

  }, [])

  const change = () => {

    console.log(teamRef)

    // teamRef.current.prev()

  }

  return <div>

    <HYAppbar></HYAppbar>

    <Carousel ref={teamRef} list={Album.list} >666666666</Carousel>

    <button type="" onClick={change}>11111</button>

  </div>

}

export default observer(HYalbum)

///

import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react'

import "./carousel.css"

import { Carousel } from 'antd'

const carousel = forwardRef((props, ref) => {

  const func = () => { console.log('343434') }

  useImperativeHandle(ref, () => ({

    hello: func

  }))

  console.log(props)

  const { list } = props

  return <div>

    <div className="carousel">

      <Carousel effect="fade" autoplay>

        {

          list.map(item => {

            return <div className="carimg" key={item.imageUrl} >

              <img className="img" src={item.imageUrl} alt="" onClick={func} />

            </div>

          })

        }

      </Carousel>

 

    </div>

  </div>

})

export default carousel