每次从列表中呈现react组件时，发出创建延迟的问题
每次从列表中呈现react组件时，发出创建延迟的问题
提问于 2018-11-02 19:33:57
我有一个react组件，用于在每次调用子组件之间呈现一个具有较小延迟的子组件。此延迟将改变随着延迟而呈现的内容。我似乎不知道如何在应用到数组的映射函数中的每个迭代中使延迟工作。这是我的代码：
import React, { Component } from "react";
import ImageListItem from "./imageListItem"
import styles from "../../css/carousel/imageList.css"
export default function Option (props) {
return(
<div>
<div style={styles.ImageList}>
<div style={styles.ImageTemplate}>
<button style={styles.ImageTempalateButton}>
<img style={styles.ImageTemplateImage} src="" alt=""/>
</button>
</div>
{
props.images.map((image) => (
<div key={image._id}>
<ImageListItem currImage={image} waitBeforeShow={2000}/>
</div>
))
}
</div>
</div>
)
}每次打电话给ImageListItem时，我都要延迟。我怎么才能做出反应呢？
回答 1
Stack Overflow用户
发布于 2018-11-02 19:46:36
只有在定时器完成后，才能在ImageListItem和有条件渲染中设置定时器。
一些注意事项：
- 不要忘记当组件被卸载时清理。
- 如果您希望逐个呈现项目，那么每个子项目的延迟都应该增加。这可以用
(index + 1) * deleyMs来完成。
以下是概念的一个小证明：
const items = [1, 2, 3, 4, 5, 6];
class Item extends React.Component {
state = { shouldRender: false }
componentDidMount() {
const { deleyMs } = this.props;
this.timer = setTimeout(() => {
this.setState({ shouldRender: true });
}, deleyMs);
}
componentWillUnMount(){
// cleanup
clearTimeout(this.timer);
}
render() {
const { text } = this.props;
const { shouldRender } = this.state;
return (
<div>
{shouldRender && text}
</div>
)
}
}
function App() {
return (
<div>
{
items.map((item, i) => <Item key={item} text={item} deleyMs={(i + 1) * 2000} />)
}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53124828
复制相关文章
相似问题
腾讯云开发者
