Question

我正在尝试使用React + Ant Design实现按钮来滚动轮播。

我已经成功地使用React refs通过单个轮播成功实现了它。

我想使按钮滚动为两个轮播。因此，我将滚动功能nextPane和prevPane提升到名为LandingPage的父类中。在这里，我还为每个转盘构造了两个React.createRef，并将它们传递到相应的组件中。

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>
    );
  }
}

我在传递ref时遇到错误，因此单击任何按钮都将产生：

TypeError: this.imageCarousel.next is not a function

如何将引用正确传递并操纵到两个轮播组件中？
React.createRef()的类型是什么？我目前使用的any我认为不正确。

Answer 1

您需要forward the refs到Carousel组件。这对于功能组件而言要简单得多，因为对于基于类的组件，您需要像包装文档中的上一个示例一样，创建一个包装函数来为您转发它们，因为类组件不接收ref道具：

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

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

const CarouselWithRef = React.forwardRef(ForwardWrapper);

然后，您可以像常规组件一样使用它：

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

使用React和Ant设计将轮播的引用传递到打字稿中？

1 个答案: