构建具有 100vw 水平相邻部分的组件的正确 React 方法

Question

我正在制作一个 React 应用程序，其中我的一个组件是其他两个组件的父组件，它们都被设置为水平相邻的

100vw

部分。一次只有一个部分可见，另一个部分被

overflow:hidden

剪裁，在每个部分中还有一个按钮，允许用户在它们之间切换。

这是我为使其工作而编写的代码的简化版本：

import {useRef} from "react;
import ComponentB from "./ComponentB";
import ComponentC from "./ComponentC";

function ComponentA() {
    const containerRef = useRef();

    function changeSection() {
        containerRef.current.style.transform === ""
            ? (containerRef.current.style.transform = "translateX(-100vw)")
            : (containerRef.current.style.transform = "");
    }

    return (
        <main style={{ overflow: "hidden" }}>
            <div ref={containerRef} style={{ display: "flex" }}>
                <ComponentB changeSection={changeSection} />
                <ComponentC changeSection={changeSection} />
            </div>
        </main>
    );
}

通常它是有效的，到目前为止我还没有发现它会导致错误或以任何方式破坏应用程序，但我不确定它是否是实现此类功能的“正确”React 方式。它感觉更像是一种普通的 javascript 方式来完成事情，据我所知，典型的 js 解决方案有时会在 React 中适得其反。 我正在寻找最简单的解决方案，因为我只需要它用于小型设备 - 在更大的屏幕上，我可以简单地设置不同的组件样式并将所有内容都放在一个屏幕上。

我的问题是：在 React 中正确的做法是什么？