react中的Prerender组件可以防止内容跳转吗？
react中的Prerender组件可以防止内容跳转吗？
提问于 2018-06-07 08:05:38
我在react中有一个滑块组件，你按下一个按钮，它会显示一个不同的组件(基本上是带有一些用户输入的power point幻灯片)。
问题是图像是在组件显示后加载的，因此在连接速度较慢的情况下加载图像时会出现一些弹出。
有没有什么方法可以轻松地预渲染下一个组件来防止这种弹出？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 08:38:02
我建议您首先创建一个名为isLoading的状态，并将其设置为true：
state = {
isLoading: true,
// the other states
}当为isLoading === true时，只呈现一个空的div，如果使用SemanticUI，则呈现一个Loader。加载完成后，只需将其设置为false并呈现您的内容。如下所示：
class YourComponent extends Component {
state = {
isLoading: true,
// the other states
};
componentDidMount() {
loadImageFunction().then() // Whatever you want to do
.then(() => this.setState({ isLoading: false }));
}
render() {
if (this.state.isLoading) {
return <div></div>;
}
return <div>Your images go in here...</div>;
}
}希望这个想法能帮助解决你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50731278
复制相关文章
相似问题