javascript - 当 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() 函数，该函数返回 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} />
    }
}