React antd 轮播方法

2024-04-21

我正在考虑使用antd轮播,但我还没有看到描述如何使用的示例goTo(slideNumber, dontAnimate)方法。

我尝试过使用这个问题的答案带箭头的react.js antd轮播 https://stackoverflow.com/questions/44114224/react-js-antd-carousel-with-arrows使goTo方法对我有用,但没有帮助,我总是得到旋转木马参考null

import * as React from 'react';
import { createPortal } from 'react-dom';
import { Modal, Carousel } from 'antd'

export default class ImagePreviewCarousel extends React.Component<any, any> {

    carousel = React.createRef();

    componentDidMount() {
        console.log(this.carousel);
    }

    render() {
        const { url, imgList } = this.props;
        const orderLayout = document.getElementById('order-layout');
        const applicationLayout = document.getElementById('application');

        return (
            createPortal(<ImageViewer url={url} onClose={this.props.onClose} imgList={imgList} />, orderLayout || applicationLayout)
        )
    }
}

const ImageViewer = (props: IProps) => {
    return (
        <Modal 
            footer={null} 
            visible={props.onClose} 
            onCancel={props.onClose}
            bodyStyle={{ backgroundColor: '#000' }}
            width={'800px'}
        >
            <div style={{
                display: 'flex', 
                flexDirection: 'column', 
                justifyContent: 'center', 
                marginTop: 'auto', 
                marginBottom: 'auto', 
                width: '100%',
                height: '100%', 
                zIndex: 10
            }}>
                <Carousel ref={node => (this.carousel = node)}>
                    {props.imgList}
                </Carousel>
            </div>
        </Modal>
    );
}

的结果console.log(this.carousel)总是返回null, 我究竟做错了什么?

p.s反应版本16.4.1,


antd Carousel https://ant.design/components/carousel/是一个实现react-slick, 你可以检查它的 API 示例 https://react-slick.neostack.com/docs/example/slick-go-to.

Here is 我的例子 https://1kli9.codesandbox.io/使用钩子:

import React, { useRef, useState } from 'react';
import { Carousel, Row, InputNumber } from 'antd';


function App() {
  const [slide, setSlide] = useState(0);

  const slider = useRef();

  return (
    <div>
      <Row style={{ marginBottom: 10 }}>
        <InputNumber
          min={0}
          max={3}
          value={slide}
          onChange={e => {
            setSlide(e);
            slider.current.goTo(e);
          }}
        />
      </Row>
      <Row>
        <Carousel
          dots={false}
          ref={ref => {
            console.log(ref);
            slider.current = ref;
          }}
        >
          <div>
            <h3>0</h3>
          </div>
          <div>
            <h3>1</h3>
          </div>
        </Carousel>
      </Row>
    </div>
  );
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React antd 轮播方法 的相关文章

随机推荐

  • Visual Studio 2012 - 导出模板自动化

    在 VS 的早期版本中 您可以使用 ProjectGen exe 自动导出 这在 VS 2012 中还可能吗 我找不到 projectgen exe 或任何解释如何完成此操作的文档 我有几个项目 导出每个项目是很乏味的 现在它在技术上仍然有
  • 已关闭的 Dismissible 小部件仍然是 flutter 中树的一部分

    我有一个待办事项应用程序 它使用provider用于状态管理和sqlite数据库 在应用程序中我试图添加Dismissible用于删除项目的小部件 但问题是当我尝试删除项目时它确实被删除了database但我在屏幕上收到错误 我是颤振的新手
  • IBOutlet 未在 awakeFromNib 中连接

    此处链接的示例代码效果很好 允许 UIScrollView 显示分页图像并预览当前图像之前和之后的图像 http blog proculo de archives 180 Paging enabled UIScrollView With P
  • 使用特殊键在NavigationController中查找ViewController

    我有一个带有不同视图控制器的导航控制器 有时我想将 ViewController 推送到 NavigationController 它已经包含在内 在这种情况下 我想从 TopController 移至现有的 ViewController
  • 使用ajax将数据从文本框发送到asp.net mvc 5控制器

    我需要一些帮助 我使用 ASP NET MVC5 和 JavaScript jQuery Ajax 编写了一个小应用程序 但我无法将数据从 javascript 发送到 MVC 控制器并更改模型 视图模型 public class MyVi
  • Linux世界中最接近Windows COM/DCOM的是什么?

    还有比管道 套接字更高级别 更全面的东西吗 对于进程间通信 D Bus http www freedesktop org wiki Software dbus是标准的更高级别机制 GTK 和 Qt 都具有 D Bus 绑定 大多数桌面环境
  • 如何将Hyperledger Composer部署到“Azure Hyperledger Single Member Blockchain”?

    我找到了将 Hyperledger Fabric 部署到 Azure Hyperledger Single Member Blockchain 的指南here https gallery technet microsoft com Hype
  • Google Tensorflow 中的事件文件

    我正在使用 Tensorflow 构建神经网络 我想在 Tensorboard 上显示训练结果 到目前为止一切正常 但我对 Tensorboard 的 事件文件 有疑问 我注意到每次运行 python 脚本时 它都会生成不同的事件文件 当我
  • java重写方法调用

    我有一个超级课程 public class SuperClass public void dosomething firstMethod secondMethod public void firstMethod System out pri
  • Javascript:如何根据项目属性值删除数组项目(JSON 对象)?

    像这样 var arr name robin age 19 name tom age 29 name test age 39 我想删除这样的数组项 数组原型方法 arr remove name test remove by name arr
  • 启用 SplitView 和 MultiTask iPad 混合应用程序。删除交互

    我们有 ionic iPad 应用程序 使用 cordova 电容器平台 我们使用以下链接启用了 iPad 13 的分割视图https en gg enable ipad split screen feature in an ionic o
  • 如何在 Android 应用程序中合理管理音频音量?

    我有一个应用程序 在其活动打开时播放间歇性声音 用户总是期望它发出这些声音 但不幸的是它受到音乐流音量的限制 我发现的选项是 调整音乐流的音量 如果用户当时正在播放音乐 则可能会使用户耳聋 如果音乐流的音量为0 则调用MediaPlayer
  • 如何在 Tensorflow 上测试自己的图像到 Cifar-10 教程?

    我训练了 Tensorflow Cifar10 模型 我想为其提供自己的单个图像 32 32 jpg png 我想将标签和每个标签的概率视为输出 但我对此遇到了一些麻烦 搜索堆栈溢出后 我发现了一些帖子this https stackove
  • 从 nib 初始化自定义 UITableViewCell,无需 dequeueReusableCellWithIdentifier

    SWIFT 我需要制作一个单元格数组 我有一些带有 nib 文件的自定义单元格类 继承自 UITableViewCell 如何在不在表视图中注册笔尖并执行 dequeueReusableCellWithIdentifier 的情况下初始化单
  • 如何设置 MySQL 以便与 C# 一起使用?

    我的任务是为旧网站创建一个新的前端 它是用 php oo 之前的版本 编写的 并使用 MySQL 数据库 主机提供 Net包 但不提供Ms Sql Server 这很好 因为数据库工作正常 但我真的想使用 Asp net 作为页面 然而 我
  • 在 NSMenuItem 中使用 NSProgressIndicator

    我正在尝试在状态栏菜单内使用 NSProgressIndicator 不确定 我使用 NSView 对象作为菜单项的视图 然后子视图进度指示器来显示它 但是每当我尝试调用 startAnimation 来获取进度时 什么也没有发生 当我尝试
  • 使用conftest.py 与从专用模块导入装置

    我最近开始熟悉 pytest 以及如何使用conftest py定义在我的测试中自动发现和导入的装置 我很清楚如何conftest py工作原理以及如何使用它 但我不确定为什么这在某些基本场景中被认为是最佳实践 假设我的测试是这样构建的 t
  • UITextView 可以容纳多少文本?

    我有一个不可编辑的UITextView显示用户输入的文本 如果文本很长会发生什么 它会让我的应用程序崩溃吗 我应该对文本进行分页吗 iPhone 网络浏览器 如 Safari Chrome 或 Firefox 如何处理此问题 有没有类似的东
  • 如何在Cloudant或CouchDB中使用skip参数?

    在 Cloudant 或 CouchDB 的索引中使用 Skip 参数是否存在潜在的性能损失 有更好的技术可以使用吗 The 在 CouchDB 中写入和查询 MapReduce 视图 http my safaribooksonline c
  • React antd 轮播方法

    我正在考虑使用antd轮播 但我还没有看到描述如何使用的示例goTo slideNumber dontAnimate 方法 我尝试过使用这个问题的答案带箭头的react js antd轮播 https stackoverflow com q