[英]How to replace a React component with another one when its state is changed
我对 React 还很陌生,这就是我想要完成的:
我想显示一个需要 3-4 秒才能加载的大图像,所以我想向用户显示一个加载器,这可以使用https://www.npmjs.com/package/react-image 中的ReactImage 实现
然后我想添加一个缩放选项,但是缩放功能应该只有在图像加载成功后才能使用,所以我打算使用https://www.npmjs.com/package/react-image-magnify
然而,没有任何事件或可能的方法让这两个状态相互通信,因此在我的render()
函数中,我可以选择使用 ReactImage 或 ReactImageMagnify。
任何帮助,将不胜感激。
这是一些伪代码,我有一个名为Preview
的反应组件,它有一个render()
函数,可以返回 ReactImage 或 ReactImageMagnify
export class Preview extends React.Component {
...
render() {
...
// if image is not yet loaded then return ReactImage
return(
<ReactImage
src={this.getPreviewUrl()}
className=""
style={{ zIndex: 1 }}
alt=""
loader={<LoadingImage />}
/>
)
//if not, return ReactImageMagnify
return(
<ReactImageMagnify {...{
smallImage: {
alt: 'Chef Works',
isFluidWidth: true,
src: 'smallimage.png'
},
bigImage: {
alt: 'Chef Works',
isFluidWidth: true,
src: 'bigimage.png'
}
}}/>
)
}
}
添加您根据图像获取调用结果更新的loading
状态值:
const ImageComponent = ({imageResult}) => {
const [loading, setLoading] = useState(true)
useEffect(() => {
if(imageResult !== null) {
setLoading(false)
}
},[imageResult])
return {
{loading ? <Loader /> : <Image src={imageResult} />
}
}
我意识到我需要从 ReactImage 获得的只是图像尚未加载时的加载图标,所以我根据 Travis James 的回答实现了相同的行为,并为 ReactImageMagnify 设置了一个条件显示属性。 代码如下:
import React, {useState} from "react";
import ReactImageMagnify from 'react-image-magnify';
import { LoadingImage } from 'ui/component/loading-image';
import styles from './style.css';
export const PreviewWithZoom = ({imageLink, zoomImageLink}) => {
const [loaded, setLoaded] = useState(false);
const [loadedZoom, setLoadedZoom] = useState(false);
return(<>
{loaded ? null : <LoadingImage />}
<img
style={loaded && !loadedZoom ? {} : {display: 'none'}}
src={imageLink}
onLoad={() => setLoaded(true)}
alt=''
/>
<img
style={{display: 'none'}}
src={zoomImageLink}
onLoad={() => setLoadedZoom(true)}
alt=''
/>
<div style={loaded && loadedZoom ? {} : {display: 'none'}}>
<ReactImageMagnify {...{
className: styles.previewZoom,
smallImage: {
src: imageLink,
width: 670,
height: 670
},
largeImage: {
src: zoomImageLink,
width: 1500,
height: 1500,
}
}}/>
</div>
</>);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.