您好我正在使用React渲染一些列表。我通过xhr接收数据并显示这些数据。部分数据显示某种进度条。 这是由div元素完成的,它获得内联宽度样式。
在css中,对宽度的更改将导致这些更改被设置为动画。然而,由于它与DOM的其余部分同时呈现,因此不会在第一次渲染时生成动画。作为一种解决方法,我确实使用了超时。
我想知道我是否可以在这件事上做得更好,因为我认为超时不是一个好习惯。我宁愿使用任何类型的事件触发行为。 STH。喜欢“渲染后”或类似的东西。有什么想法吗?
class Container extends React.Component {
componentDidMount() {
let maxPts = 0;
const persons = fetchPersons();
persons.forEach(function (person) {
maxPts = Math.max(maxPts, person.Pts || 0);
});
this.setState({
data: athletes,
dataAccepted: true
});
// TODO: Is that a good practice? Causes the width to be set later on to allow a transition
window.setTimeout(() => {
this.setState({
max: maxPts
});
}, 250);
}
render() {
return (
<View>
<Presenter max={this.state.max} persons={this.state.data}/>
</View>
);
}
}