Fatal编程技术网
  • jquery/
  • Jquery 如何让React.js和Bootstrap 4模式旋转木马始终在open上显示第一个图像

Jquery 如何让React.js和Bootstrap 4模式旋转木马始终在open上显示第一个图像

jquery reactjs twitter-bootstrap

Jquery 如何让React.js和Bootstrap 4模式旋转木马始终在open上显示第一个图像,jquery,reactjs,twitter-bootstrap,bootstrap-modal,carousel,Jquery,Reactjs,Twitter Bootstrap,Bootstrap Modal,Carousel,我将React.js与bootstrap4modal/carousel一起使用，我希望在打开/重新打开modal时始终显示第一个图像。现在，第一个图像在第一次打开模式时显示，但如果用户滚动到另一个图像，然后关闭并重新打开模式，则会显示用户查看的最后一个图像，而不总是第一个图像。我尝试在我的componentDidMount中使用jquery来强制使用旋转木马索引，但它不起作用 以下是我预期行为的示例场景… 1.打开模式（显示第一幅图像） 2.旋转传送到第二个项目 3.关闭模式 4.打开模式（显示

我将React.js与bootstrap4modal/carousel一起使用，我希望在打开/重新打开modal时始终显示第一个图像。现在，第一个图像在第一次打开模式时显示，但如果用户滚动到另一个图像，然后关闭并重新打开模式，则会显示用户查看的最后一个图像，而不总是第一个图像。我尝试在我的componentDidMount中使用jquery来强制使用旋转木马索引，但它不起作用

以下是我预期行为的示例场景…
1.打开模式（显示第一幅图像）
2.旋转传送到第二个项目
3.关闭模式
4.打开模式（显示第一幅图像）

这是一个

index.js

import React，{Component}来自'React'；
从'react dom'导入{render}；
导入“/style.scss”；
从“jquery”导入美元；
类应用程序扩展组件{
构造函数（）{
超级（）；
}
componentDidMount（）{
//我在展会活动中尝试始终从索引0开始旋转
//$（'.largeModal'）.on（'show.bs.modal'，function（）{
//log（'show.bs.modal event'）；
//$（'.carousel'）。carousel（0）；
// });
//$（'.largeModal'）.on（'show.bs.modal'，function（）{
//log（'show.bs.modal event'）；
//$（#myCarousel'）。carousel（0）；
// });
}
render（）{
返回(
使用Bootstrap 4模式和旋转木马进行响应
开放模态
{/*模态*/}
{/*旋转木马*/}

  • 

  • 

  • 
接近
);
}
}
render（，document.getElementById（'root'））；
    style.scss

    .img大小{
高度：450px；
宽度：700px；
背景尺寸：封面；
溢出：隐藏；
}
.模态内容{
宽度：700px；
边界：无；
}
.模态体{
填充：0；
}
.carousel控件上一个图标{
背景图像：url（“数据：image/svg+xml；charset=utf8，%3Csvg xmlns=”http://www.w3.org/2000/svg'填充='%23009be1'视图框='0 8'%3E%3Cpath d='M5.25 0l-4 1.5-1.5-2.5-2.5-2.5-1.5-1.5-1.5z'/%3E%3C/svg%3E'；
宽度：30px；
高度：48px；
}
.carousel控件下一个图标{
背景图像：url（“数据：image/svg+xml；charset=utf8，%3Csvg xmlns=”http://www.w3.org/2000/svg'填充='%23009be1'视图框='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E'；
宽度：30px；
高度：48px；
}
    index.html

    
旋转木马
您需要启用JavaScript才能运行此应用程序。
    package.json

    {
“名称”：“反应”，
“版本”：“0.0.0”，
“私人”：没错，
“依赖项”：{
“引导”：“^4.4.1”，
“jquery”：“1.9.1-3”，
“节点sass”：“^4.13.1”，
“popper.js”：“^1.16.0”，
“反应”：“^16.9.0”，
“反应dom”：“^16.9.0”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试--env=jsdom”，
“弹出”：“反应脚本弹出”
},
“依赖性”：{
“反应脚本”：“最新”
}
}
    将图像属性存储在对象数组中，如。 并将它们映射到渲染

    let arr = [
{
className:'img-size',
src:'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
alt:'Third slide'
 },
and more like this.
]

//Then map the images in carousel ann it would always show first image first, because it would always render images at runtime.

arr.map(img => {
return(
           <img
               className={img.className}
               src={img.src}
               alt={img.alt}
          />
);
})


    让arr=[
{
类名：'img-size'，
src:'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1350&q=80'，
alt:“第三张幻灯片”
},
更像这样。
]
//然后在carousel ann中映射图像，它总是首先显示第一个图像，因为它总是在运行时渲染图像。
arr.map（img=>{
返回(
);
})
    tl，dr； 应用程序中导入的jQuery与Windows对象中的jQuery不同。因此，您正在使用的
    .carousel（）
    方法不会通过引导扩展。通过使用，可以访问“窗口中的一个”对象

    const $ = window.$
    内置
    componentDidMount
    功能。看吧。
    或者您可以在jQuery之后导入popper.js和Bootstrap的js，并从
    index.html
    中删除
    标记