关于typescript + react +antd 的Function components cannot have string refs. We recommend using useRef()

关于typescript + react +antd 的Function components cannot have string refs. We recommend using useRef()问题

我这里是一个走马灯 想要调用 他的prev ,next 方法可是按照网上的说法用this.ref.(自己取的名字).prev();就会报出 Function components cannot have string refs. We recommend using useRef()这个问题。我百思不得其解。百度的方法都是让我去掉ref 但是我想要调用这个走马灯的方法就不能去掉，于是在我不断修改发现后终于得到了下面的写法。

//头部要引用useRef
import React, { useState, useEffect, useRef} from 'react';
const SelfCarousel: React.FC<{ children: any[] }> = props => {
  const carouselEL = useRef<Carousel>(null);
  return (
    <div className={style.dd}>
      <div className={style.bannerBox}>
        <img
          src={`/images/left.png`}
          alt=""
          className={style.imgStyle_left}
          onClick={() => {
            carouselEL.current!.prev();
          }}
        />
        <Carousel dots={false} ref={carouselEL}>
          {props.children.map((itemE: any, m: any) => (
            <div className={style.contentStyle}>
              {itemE.map((itemM: any, j: any) => (
                <div className={style.setContent}>
                  <div className={style.t}> {itemM.catalogName}</div>
                  <div className={style.p}>简介示例:</div>
                  <div className={style.c}>{itemM.catalogName}</div>
                  <AssetsSum catalogId={itemM.catalogId} />
                  <Link to={`/assetsDirectory?c=${itemM.catalogId}`} target="_blank">
                    <div className={style.x}>查看详情</div>
                  </Link>
                </div>
              ))}
            </div>
          ))}
        </Carousel>
        <img
          src={`/images/right.png`}
          alt=""
          className={style.imgStyle_right}
          onClick={() => {
            carouselEL.current!.next();
          }}
        />
      </div>
    </div>
  );
};

下面是他的引用

 const renderItems = (items: any[]) => {
    if(Array.isArray(items) && items.length){ 
      items = items.map((item,h) =>({
        ...item,
        children: formatArray(item.children),
      }));
      return (
        <div className={style.wrap}>
          {  
            items.map((c, i) => (
              <div className={style.dl} key={i}>
                {/* 整体box */}
               <div className={style.main}>
                  {/* 左边内容 */}
                  <Row>
                    <Col span={6}>
                    <div className={style.dt}>
                        <div className={style.tit}>{c.catalogName}</div>
                        <img className={style.ico} src={`/images/img-assets-${(i+1)%3==0?3:(i+1)%3}.png`} alt="" />
                          <AssetsNum catalogId={c.catalogId} />
                    </div>
                    </Col>
                    {/* 右边内容 */}
                    <Col>
                      <SelfCarousel children={c.children} />
                    </Col>
                  </Row>      
                </div>  
              </div>
            ))
          }
        </div>
      ) 
    }
    return null;
  }
  return renderItems(catalogs);
}

总结一下就是说你使用的ref不能用在无状态的组件中，所以你要自己定义一个useRef然后调用自己的定义的组件来获得。再调用对应的方法就可以了。