如何在不修改getItemStyle的情况下为react-beautiful-dnd元素添加独有样式

完全懂你的需求——不想改动已有的getItemStyle函数，但又要给每个拖拽元素加上独有的样式属性，其实用对象合并就能轻松搞定，不需要修改原函数。

React的style属性接受一个对象，我们可以把getItemStyle返回的基础样式对象，和你想要添加的独有样式对象合并在一起，具体有两种常用方式：

方式一：使用扩展运算符（推荐） #

直接用ES6的扩展运算符...把两个对象合并，你的独有样式写在后面，这样如果和基础样式有同名属性，独有样式会覆盖基础样式（如果需要的话）：

<div 
  ref={provided.innerRef} 
  {...provided.draggableProps} 
  {...provided.dragHandleProps} 
  style={{
    // 先引入基础样式
    ...getItemStyle(snapshot.isDragging, provided.draggableProps.style),
    // 这里添加你的独有样式，比如每个元素不同的背景色、内边距等
    backgroundColor: snapshot.isDragging ? '#ffeb3b' : '#e3f2fd',
    padding: '12px',
    borderRadius: '4px'
  }}
>
  {/* 元素内容 */}
</div>

方式二：使用Object.assign #

如果你需要兼容旧环境，也可以用Object.assign来合并对象：

<div 
  ref={provided.innerRef} 
  {...provided.draggableProps} 
  {...provided.dragHandleProps} 
  style={Object.assign(
    {},
    getItemStyle(snapshot.isDragging, provided.draggableProps.style),
    // 独有样式
    {
      border: '1px solid #ccc',
      marginBottom: '8px'
    }
  )}
>
  {/* 元素内容 */}
</div>

动态独有样式的情况 #

如果每个元素的独有样式是动态的（比如来自组件props或者状态），直接把动态对象也合并进去就行：

// 假设组件接收一个uniqueStyle prop，每个元素传入不同的样式对象
<div 
  ref={provided.innerRef} 
  {...provided.draggableProps} 
  {...provided.dragHandleProps} 
  style={{
    ...getItemStyle(snapshot.isDragging, provided.draggableProps.style),
    ...props.uniqueStyle
  }}
>
  {/* 元素内容 */}
</div>

这种方式既保留了原getItemStyle的逻辑，又能灵活给每个元素添加个性化样式，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Gergő Horváth