React应用程序上的响应式布局

Question

任务是根据设备宽度显示不同的组件；

我提出了两种变体：

1. 编写一个React组件，它将在每个宽度（sm，md，xl）上包含多个组件。它会自动检查设备的宽度，并根据宽度仅渲染一个组件。 （example）

<DeviceChecker>
    <Desktop>
        <List/>
    </Desktop>
    <Mobile>
        <Carousel/>
    </Mobile>
</DeviceChecker>

我不喜欢这种方法，是检查窗口调整大小事件的宽度。

1. 在React中编写两个组件，但使用CSS媒体查询显示或隐藏每个组件，如下所示：

<div>
    <Carousel className="sm" />
    <List className="md" />
</div>

在这种情况下，我不喜欢React实际上会渲染这两个组件，但是其中一个会被简单隐藏

我知道如何实现这两种变体，但问题是哪种方法是为React应用编写响应式布局的正确方法？