所以我使用 FLUX 来管理我的 React 项目。下面是返回字符列表的组件的代码。
import React from 'react';
import {Link} from 'react-router';
import {isEqual} from 'underscore';
import CharacterListStore from '../stores/CharacterListStore';
import CharacterListActions from '../actions/CharacterListActions';
class CharacterList extends React.Component {
constructor(props) {
super(props);
this.state = CharacterListStore.getState();
this.onChange = this.onChange.bind(this);
}
componentDidMount() {
CharacterListStore.listen(this.onChange);
CharacterListActions.getCharacters(this.props.params);
}
componentWillUnmount() {
CharacterListStore.unlisten(this.onChange);
}
componentDidUpdate(prevProps) {
if (!isEqual(prevProps.params, this.props.params)) {
CharacterListActions.getCharacters(this.props.params);
}
}
onChange(state) {
this.setState(state);
}
render() {
let charactersList = this.state.characters.map((character, index) => {
return (
<div key={character.characterId} className='list-group-item animated fadeIn'>
<div className='media'>
<span className='position pull-left'>{index + 1}</span>
<div className='pull-left thumb-lg'>
<Link to={'/characters/' + character.characterId}>
<img className='media-object' src={'http://image.eveonline.com/Character/' + character.characterId + '_128.jpg'} />
</Link>
</div>
<div className='media-body'>
<h4 className='media-heading'>
<Link to={'/characters/' + character.characterId}>{character.name}</Link>
</h4>
<small>Race: <strong>{character.race}</strong></small>
<br />
<small>Bloodline: <strong>{character.bloodline}</strong></small>
<br />
<small>Wins: <strong>{character.wins}</strong> Losses: <strong>{character.losses}</strong></small>
</div>
</div>
</div>
);
});
return (
<div className='container'>
<div className='list-group'>
{charactersList}
</div>
</div>
);
}
}
export default CharacterList;
组件通过Action获取数据并更新store,然后根据状态渲染html元素。
我的问题是:我是否有可能实现一些东西,使每个项目单独淡入淡出,渲染上的每个项目都有 500 毫秒的延迟?
我被告知不要在 React 中使用 JQuery,所以我想我正在努力思考 React,感谢任何帮助或建议。提前谢谢你
最佳答案
看看 React 的动画文档 - https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup
您可以使用 ReactCSSTransitionGroup
或 ReactTransitionGroup
来制作动画。
如果你想一个一个地按顺序淡入淡出项目,你可以使用 css transition-delay
属性。
或者,您可以通过递归调用超时函数来控制顺序,该函数将设置组件的状态,将下一个字符连接到 state 直到 this.state.characters.length
=== state .characters.length
(在卸载组件的情况下,一定要在所有字符处理完之前销毁超时函数)
关于javascript - React.js fadeIn + 渲染每个元素的延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41282657/