Javascript 如何在状态更改时用另一个组件替换React组件

我对React非常陌生，这就是我想要实现的目标：

我想显示一个需要3-4秒才能加载的大图像，所以我想向用户显示一个加载程序，这可以通过使用ReactImage from实现

然后我想添加一个缩放选项，但缩放功能应该只有在成功加载图像后才可用，所以我计划使用

但是，没有任何事件或可能的方式使这两个控件相互通信状态，因此在我的

render（）

函数中，我可以选择使用ReactImage或ReactImage放大

任何帮助都将不胜感激

这里是一些伪代码，我有一个名为

预览

的react组件，它有一个

render（）

函数，返回ReactImage或ReactImage放大

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'
                    }
                }}/>

        )
    }
}

导出类预览扩展React.Component{
...
render（）{
...
//如果图像尚未加载，则返回图像
返回(
)
//如果不是，返回图像放大
返回(
)
}
}

添加一个

加载

状态值，该值根据图像获取调用的结果更新：

const ImageComponent = ({imageResult}) => {
    const [loading, setLoading] = useState(true)

    useEffect(() => {
       if(imageResult !== null) {
            setLoading(false)
       }
    },[imageResult])

    return {
       {loading ? <Loader /> : <Image src={imageResult} />
    }
}

constImageComponent=（{imageResult}）=>{
常量[loading，setLoading]=useState（true）
useffect（（）=>{
如果（imageResult！==null）{
设置加载（错误）
}
}，[imageResult]）
返回{
{加载？：
}
}

我意识到，当图像尚未加载时，我只需要从ReactImage加载图标，因此我根据Travis James的回答实现了相同的行为，并为ReactImage放大设置了条件显示属性。代码如下：

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>
    </>);
};

import React，{useState}来自“React”；
从“反应图像放大”导入反应图像放大；
从“ui/component/loading image”导入{LoadingImage}；
从“/style.css”导入样式；
导出常量PreviewWithZoom=（{imageLink，zoomImageLink}）=>{
const[loaded，setLoaded]=useState（false）；
常量[loadedZoom，setLoadedZoom]=useState（false）；
返回(
{加载？空：}
setLoaded（true）}
alt=“”
/>
setLoadedZoom（真）}
alt=“”
/>
);
};

请发布相关代码片段。它看起来不像

react image

在加载图像时有任何界面可以显示。这意味着，如果你依赖于这个软件包，你将很难做到这一点。虽然这并没有解决我的问题，但它实际上启发了我重新思考如何实现我想要的行为。谢谢！