如何为被其他组件包裹的GridListTile传递GridList样式Props

Material UI 的 GridList 组件依靠遍历自身的第一层直接React子元素，识别到类型为 GridListTile 的节点后，自动注入单元格高度、跨列宽度、间距等布局计算后的样式Props。
当在map循环中将 GridListTile 嵌套在 react-beautiful-dnd 的 Draggable 组件内部时，GridList 的直接子元素变成了 Draggable 组件，而非目标 GridListTile。此时GridList的子元素识别逻辑会直接跳过类型不匹配的Draggable组件，完全不会将布局Props透传到内部嵌套的GridListTile上，最终导致网格布局完全错乱。该问题属于Material UI组合模式的典型适配场景。

• 核心调整方向：保证 GridList 的第一层直接子元素为 GridListTile，避免Draggable组件打断GridList的子元素识别链路
• 将Draggable组件下沉到GridListTile的内部，利用其render props机制，将拖拽相关的ref、事件绑定到内部的全尺寸包裹节点上
• 不要在GridList和GridListTile之间插入额外的包裹组件或DOM节点，防止进一步阻断样式传递逻辑

调整后的可运行代码示例：

<GridList
    cellHeight={120}
    className={classes.gridList}
    cols={7}
    spacing={10}
    {...providedDroppable.droppableProps}
    ref={providedDroppable.innerRef}
>
    {data.items.map((item, index) => (
        {/* GridList直接子元素始终为GridListTile，可被正常识别 */}
        <GridListTile key={item.key} cols={1}>
            <Draggable
                draggableId={item.key}
                index={index}
            >
                {(providedDraggable) => (
                    <div
                        ref={providedDraggable.innerRef}
                        {...providedDraggable.draggableProps}
                        {...providedDraggable.dragHandleProps}
                        style={{
                            width: '100%',
                            height: '100%',
                        }}
                    >
                        <div className={classes.slot}></div>
                        <GridListTileBar
                            title={item.name}
                            classes={{
                                root: classes.slotTitle,
                            }}
                        />
                    </div>
                )}
            </Draggable>
        </GridListTile>
    ))}
    {providedDroppable.placeholder}
</GridList>

• 内部包裹拖拽节点时，一定要给节点设置100%宽高，避免拖拽区域尺寸小于GridListTile导致点击偏移
• 合并自定义class时，不要覆盖GridList自动注入的定位、尺寸类基础样式
• 可根据实际交互需求，单独给拖拽手柄绑定 dragHandleProps，不要将整个Tile区域都设置为拖拽触发区，避免影响内部按钮、文本框等交互组件的正常使用

提示：如果后续需要更灵活的自定义布局，也可以完全跳过GridList的自动样式透传逻辑，根据cellHeight、cols、spacing的配置手动计算每个GridListTile的布局参数，直接通过style、className props传入即可，该方式不受组件嵌套层级的限制。

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