forgeplus-react/src/forge/Component/SiderBar.js

import React, { useEffect, useState } from 'react';
import { Popover , Tooltip } from 'antd';
import './Component.scss';
import axios from 'axios';

const $ = window.$;

$(window).scroll(function () {
  if ($(".gotop").length > 0) {
    if ($(document).scrollTop() > 0) {
      $(".-task-sidebar .gotop").show();
      $(".gotop").click(function () {
        $("html,body").scrollTop(0);
      });
    }
    if ($(document).scrollTop() === 0) {
      $(".-task-sidebar .gotop").hide();
    }
  }
});

function SiderBar() {
  const [ data , setData ] = useState([]);

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

  function getFAQ(){
    const url = `/faqs.json`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setData(result.data);
      }
    }).catch(error=>{})
  }
  function content(list){
    return <div>
      <p className="titlecontent">帮助</p>
      <ul className="faqUl">
        {
          list && list.map((i,k)=>{
            return(
              <li><a href={`${i.url}`} target="_blank">{i.question}</a></li>
            )
          })
        }
      </ul>
    </div>
  }
  return (
    <div className={"-task-sidebar"} >
        {
          data && data.length > 0 && (data[0] && data[0].question) ? 
          <Popover content={content(data)} overlayClassName="helpBox" placement={"left"}>
            <div className="feedback">
              <i className="iconfont icon-bangzhu font-22"></i>
            </div>
          </Popover>
          :""
        }
        {/* <div className="scan pr" title="微信扫一扫">
          <span className="inline erweima"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
        </div>
        <div className="consult" title='在线咨询'>
          <a target="_blank" className="color_white" href="//shang.qq.com/wpa/qunwpa?idkey=2f2043d88c1bd61d182b98bf1e061c6185e23055bec832c07d8148fe11c5a6cd">
            <i className="iconfont icon-qqzaixianzixun color-white font-22"></i>
          </a>
        </div> */}
        <div className="gotop">
          <Tooltip title="返回顶部" placement={"left"}>
            <a><i className="iconfont icon-huidaodingbu1"></i></a>
          </Tooltip>
        </div>
    </div>
  )
}

export default SiderBar;