forgeplus-react/src/home/TopEdition.jsx

import React , { useEffect , useState } from 'react';
import Slider from 'react-slick';
import axios from 'axios';
import { getImageUrl } from 'educoder';
import Left from './Img/left.png';
import Right from './Img/right.png';


let setting={
  dots:true,
  infinite: true,
  speed: 2000,
  slidesToShow: 1,
  slidesToScroll: 1,
  pauseOnDotsHover:true,
  autoplaySpeed:5000,
  pauseOnFocus:true,
  autoplay:true,
  arrows:true,
  prevArrow:<button type='button' class='slick-prev slick-arrow'><img src={Left} width="70px" alt=""/></button>,
  nextArrow:<button type='button' class='slick-prev slick-arrow'><img src={Right} width="70px" alt=""/></button>
}
function TopEdition({register,current_user}) {

  const [ bannerList , setBannerList ] = useState(undefined);

  useEffect(()=>{
    getBanner();
  },[])

  function getBanner() {
    const url = `/topics.json?topic_type=banner`;
    axios.get(url,{
      params:{
        limit:4
      }
    }).then(result=>{
      if(result){
        setBannerList(result.data.topics);
      }
    }).catch(error=>{})
  }
  return(
    <Slider {...setting}>
      {
        bannerList && bannerList.length > 0 ?
        bannerList.map((i,k)=>{
          return(
            <div className={`regform`}>
              {/*  style={{backgroundImage:`url(${getImageUrl(i.image)})`}} */}
              <div>
                <img src={getImageUrl(i.image)} alt="" height="100%"/>
                {
                  k +1 === bannerList.length && (!(current_user && current_user.login)) ?
                  <p className="regPrg"><a href={register}>立即注册</a></p>
                  :""
                }
              </div>
            </div>
          )
        })
        :
        ""
      }
    </Slider>
  )
}
export default TopEdition;