React Bootstrap中Carousel.Item作用及element.something语法疑问

<Carousel.Item> 的具体作用 #

• 它是React Bootstrap轮播组件的专属子项容器，每一个<Carousel.Item>对应轮播中的一张独立滑动页，你需要几屏轮播内容就声明几个该组件。
• 它内置了轮播切换的动画效果、显示隐藏状态控制逻辑，你无需自行实现切换时的淡入淡出、滑动位移等样式和状态判断，只需要把单屏要展示的内容（比如示例代码中的图片、标题描述）嵌套在组件内部即可，外层的<Carousel>父组件会自动管理所有Item的轮播顺序和切换状态。
• 它可以和配套的<Carousel.Caption>搭配使用，将Caption放在Item内部时，会自动定位到当前轮播页的底部作为内容说明，无需额外编写定位样式。

<Element.Something> 语法的含义 #

这是React生态中非常常见的复合组件写法，本质是把关联性极强的多个子组件挂载到同一个父组件的属性上，既简化了导入逻辑，也能直观体现组件之间的从属关系。
它的底层实现逻辑大致如下：

// 分别定义父组件和子组件
const Carousel = (props) => {/* 轮播核心逻辑 */}
const Item = (props) => {/* 轮播子项逻辑 */}
const Caption = (props) => {/* 轮播说明文字逻辑 */}

// 把子组件挂载为父组件的属性
Carousel.Item = Item
Carousel.Caption = Caption

export default Carousel

使用这种写法后，你只需要导入Carousel这一个组件，就可以直接通过<Carousel.Item>、<Carousel.Caption>调用对应的子组件，不需要单独导入每一个子组件，同时也能明确感知到这些子组件只能和Carousel配套使用，不能脱离父组件单独在其他场景调用。

内容的提问来源于stack exchange，提问作者Kokoyroy