我正在使用react-redux实现react-bootsrap轮播,并且我在标题中收到了错误。
我使用受控转盘,当转盘自动更改幻灯片时会显示错误消息。
当用户点击上一个时。下一个按钮并手动更改它们似乎都没问题。
如果我将道具或类似的道具或选项添加到道具或类似物中,我不会得到它吗?
这是我的代码:
容器:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import store from 'store/configureStore'
import Slides from 'components/SlideShow'
import { getInitalSlides, handleSelect } from 'actions/SlidesActions'
class Home extends Component {
constructor(props) {
super(props)
this.state = {
index: null,
direction: null
}
this.handleSelect = this.handleSelect.bind(this)
static fetchData({ store }) {
return store.dispatch(getInitalSlides())
}
componentDidMount() {
this.props.getInitalSlides()
}
handleSelect(selectedIndex, e) {
//alert(e)
this.props.handleSelect(selectedIndex, e)
}
render() {
return (
<div className="Home">
<h1>Home Page</h1>
<Slides
slides={this.props.slides}
getInitialState={this.state.index}
getInitialStateD={this.state.direction}
slidesControl={this.handleSelect}
/>
<div><Link to="/question">to question</Link></div>
<div><Link to="/posts">to posts</Link></div>
</div>
)
}
}
function mapStateToProps (state) {
const { slides, handleSelect } = state
return { slides: state.slides, onSelect: state.handleSelect }
}
export { Home }
export default connect(mapStateToProps { getInitalSlides, handleSelect})(Home)
以下是组件中的相关位:
render() {
return (
<Carousel
activeIndex={this.props.getInitialState}
direction={this.props.getInitialStateD}
onSelect={(selectedIndex,e)=>this.props.slidesControl(selectedIndex,e)}
>
{
this.props.slides.map((s)=>{
let id = s.get('id')
let title = s.get('title')
let image = s.get('image')
let alt = s.get('alt')
let caption = s.get('caption')
return(
<Carousel.Item key={id} >
<img width={900} height={500} alt={s.get('alt')} src={image} alt={alt}/>
<Carousel.Caption>
<h3>{title}</h3>
<p>{caption}</p>
</Carousel.Caption>
</Carousel.Item>
)
})
}
</Carousel>)
}
}
编辑: 这是相关的react-bootstrap轮播代码(抛出错误的地方)
var onSelect = this.props.onSelect;
if (onSelect) {
if (onSelect.length > 1) {
// React SyntheticEvents are pooled, so we need to remove this event
// from the pool to add a custom property. To avoid unnecessarily
// removing objects from the pool, only do this when the listener
// actually wants the event.
e.persist();
e.direction = direction;
onSelect(index, e);
} else {
onSelect(index);
}
}
答案 0 :(得分:1)
我分析了Carousel.js
的{{1}}代码,我怀疑它是react-bootstrap
库本身的问题。
There is this line triggering change in Carousel.js code:
react-bootstrap
this.timeout = setTimeout(this.next, this.props.interval);
方法需要this.next
类型的参数,但不会从SynteticEvent
调用传递。这会显示您的错误消息:setTimeout
。
该问题很可能已隐藏了很长时间but was exposed with this commit,其中事件参数实际上由Carousel.ja代码本身使用。
所以我建议创建react-bootstrap Github问题,同时降级到不包含上述提交的版本。
答案 1 :(得分:0)
这是项目的github页面中的问题链接。似乎即将出现修复:
https://github.com/react-bootstrap/react-bootstrap/issues/2029