如何获取变量columnID

【问题标题】：How to get variable columnID如何获取变量columnID
【发布时间】：2021-04-24 23:09:22
【问题描述】：

我已经创建了删除按钮

我想获取列变量以便能够删除正确列中的项目，但我不知道如何获取该数据...我曾想过将数据作为道具传递给功能，但它不起作用...

非常感谢你们的帮助！

链接代码框：

https://codesandbox.io/s/simple-virtual-list-board-forked-ghxw4?file=/src/index.js

function Item({ provided, item, style, isDragging, column }) {
  return (
    <div
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      ref={provided.innerRef}
      style={getStyle({
        draggableStyle: provided.draggableProps.style,
        virtualStyle: style,
        isDragging
      })}
      className={`item ${isDragging ? "is-dragging" : ""}`}
    >
      {item.text}
      <button onClick={() => console.log("column", column)}> Delete</button>
    </div>
  );

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以传递column，而不是在itemData 属性中传递column.items。您现在可以通过data 属性访问Row 组件内的column 数据，然后您可以将其传递给Item 组件。

<FixedSizeList {...props} itemData={column}>
  {Row}
</FixedSizeList>

const Row = React.memo(function Row(props) {
  const { data: column, index, style } = props
  const { items } = column
  const item = items[index]
  if (!item) {
    return null
  }

  return (
    <Draggable draggableId={item.id} index={index} key={item.id}>
      {(provided) => (
        <Item provided={provided} item={item} style={style} column={column} />
      )}
    </Draggable>
  )
}, areEqual)

【讨论】：

非常感谢，非常感谢您的帮助。亲切的问候。