javascript - 状態が変化したときに React コンポーネントを別のコンポーネントに置き換える方法

Question

私はReactにかなり慣れていませんが、これが私が達成しようとしていることです:

読み込みに 3 ～ 4 秒かかる大きな画像を表示したいので、https: //www.npmjs.com/package/react-image の ReactImage を使用して達成可能なローダーをユーザーに表示したい

次に、ズームするオプションを追加したいのですが、ズーム機能は画像が正常に読み込まれた後にのみ使用できるようにする必要があるため、https://www.npmjs.com/package/react-image-magnifyを使用する予定です

ただし、2 つの状態を相互に通信させるイベントや可能な方法がないため、render()関数で ReactImage または ReactImageMagnify のいずれかを使用することを選択できます。

どんな助けでも大歓迎です。

ここにいくつかの疑似コードがありPreviewますrender()。

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

        )
    }
}