如何在 React 组件的状态发生变化时用另一个组件替换它

Question

我对 React 很陌生，这就是我想要完成的事情：

我想展示一张需要 3-4 秒才能加载的大图片，所以我想向用户展示一个加载器，这可以使用来自 https://www.npmjs.com/package/react-image

的 ReactImage 实现

然后我想添加一个缩放选项，但是缩放功能应该是图片加载成功后才可以使用，所以我打算用https://www.npmjs.com/package/react-image-magnify

然而，没有任何事件或可能的方式让两者相互交流状态，因此在我的 render() 函数中我可以选择使用 ReactImage 或 ReactImageMagnify。

如有任何帮助，我们将不胜感激。

这是一些伪代码，我有一个名为 Preview 的 React 组件，它有一个 render() 函数 returns 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'
                    }
                }}/>

        )
    }
}

Answer 1

添加一个 loading 状态值，您根据图像提取调用的结果更新该值：

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

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

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

Answer 2

我意识到我需要从 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>
    </>);
};

如何在 React 组件的状态发生变化时用另一个组件替换它

How to replace a React component with another one when its state is changed

javascript

reactjs

react-image