[英]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.