使用 React 和 Ant 设计将轮播的参考传递给 typescript？

Question

I'm trying to implement buttons to scroll a carousel using React + Ant Design.

I have managed to successfully implement it with a single carousel using React refs.

I would like to make the button scroll two carousel instead. So i lifted the scrolling functions nextPane and prevPane into a parent class called LandingPage . Here I also constructed two React.createRef for each of the carousel and pass them in into the corresponding components.

LandingPage.tsx

class LandingPage extends Component<Props, State> {
  // ToDo
  private imageCarousel: any;
  private textCarousel: any;

  constructor(props: Props) {
    super(props);
    this.imageCarousel = React.createRef();
    this.textCarousel = React.createRef();
  }

  nextPane = () => {
    this.imageCarousel.next();
    this.textCarousel.next();
  };

  prevPane = () => {
    this.imageCarousel.prev();
    this.textCarousel.prev();
  };

  render() {
    return (
      <Fragment>
        <NavBar title="Athena."></NavBar>
        <ImageCarouselWrapper>
          <ImageCarousel
            ref={this.imageCarousel}
            nextPane={this.nextPane}
            prevPane={this.prevPane}
          />
          <WrapperCarouselOverlay>
            <CarouselOverlay ref={this.textCarousel} />
          </WrapperCarouselOverlay>
        </ImageCarouselWrapper>
      </Fragment>
    );
  }
}

ImageCarousel.tsx

interface State {}
interface Props {
  ref: any;
  nextPane: () => void;
  prevPane: () => void;
}

class ImageCarousel extends Component<Props, State> {
  private carousel: any;

  constructor(props: Props) {
    super(props);
    this.carousel = React.createRef();
  }

  render() {
    const { nextPane, prevPane, ref } = this.props;

    return (
      <CarouselWrapper>
        <RegularButtonWrapper>
          <RegularButton size="large" icon="caret-left" onClick={prevPane} />
        </RegularButtonWrapper>

        <FlexCarousel>
          <Carousel
            ref={ref} // This doesn't work, neither does 'node => ({ref} = node)'
            speed={700}
            effect="scrollx"
          >
           </img>
          </Carousel>
        </FlexCarousel>
        <RegularButtonWrapper>
          <RegularButton size="large" icon="caret-right" onClick={nextPane} />
        </RegularButtonWrapper>
      </CarouselWrapper>
    );
  }
}

I am running into an error passing the ref whereby clicking any of the button yields:

TypeError: this.imageCarousel.next is not a function

1. How do I pass and manipulate the refs properly into the two carousel component?

2. What is the type for React.createRef() ? I am using any currently which I do not think is correct.

Answer 1

You need to forward the refs to the Carousel components. This is much simpler to do with functional components, as with class-based components you'll need to make a wrapper function to forward them for you like in the last example from the documentation, since class components do not receive ref props:

class ImageCarousel extends Component<Props, State> {
...
}

const ForwardWrapper = (props, ref) => {
  return <ImageCarousel {...props} ref={ref} />;
}

const CarouselWithRef = React.forwardRef(ForwardWrapper);

Then you can use it like a regular component:

<CarouselWithRef {...props} ref={this.imageCarousel}/>