如何将 GridList 样式道具传递给包装在其他组件中的 GridListTile

问题描述

我在传递应该在地图函数中注入到 GridListTile 的 GridList 样式道具时遇到问题。根据我目前阅读和浏览的内容，我发现它可能与 Material-Ui 中的 Composition 相关。

这是我的工作代码，没有将其包装在 react-beautiful-dnd 的 Draggable 组件中。

<GridList
    cellHeight={120}
    className={classes.gridList}
    cols={7}
    spacing={10}
    {...providedDroppable.droppableProps}
    ref={providedDroppable.innerRef}
>
    {data.items.map((item,index) => {
        return (
            <GridListTile key={item.key} cols={1}>
                <div className={classes.slot}></div>
                <GridListTileBar
                    title={item.name}
                    classes={{
                        root: classes.slottitle,}}
                />
            </GridListTile>
        );
    })}
    {providedDroppable.placeholder}
</GridList>

这是将其包装在 Draggable 组件中的无效代码

                            <GridList
                                cellHeight={120}
                                className={classes.gridList}
                                cols={7}
                                spacing={10}
                                {...providedDroppable.droppableProps}
                                ref={providedDroppable.innerRef}
                            >
                                {data.items.map((item,index) => {
                                    return (
                                        <Draggable
                                            key={item.key}
                                            draggableId={item.key}
                                            index={index}
                                        >
                                            {(providedDraggable) => {
                                                return (
                                                    <GridListTile
                                                        key={item.key}
                                                        cols={1}
                                                        ref={providedDraggable.innerRef}
                                                        {...providedDraggable.draggableProps}
                                                        {...providedDraggable.dragHandleProps}
                                                    >
                                                        <div className={classes.slot}></div>
                                                        <GridListTileBar
                                                            title={item.name}
                                                            classes={{
                                                                root: classes.slottitle,}}
                                                        />
                                                    </GridListTile>
                                                );
                                            }}
                                        </Draggable>
                                    );
                                })}
                                {providedDroppable.placeholder}
                            </GridList>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）