我试图创建一个可拖拽的表格/列表，它给出了错误提示'provided.innerRef没有提供HTMLElement。‘

Question

我正在尝试使用Material UI和react-beautiful dnd创建一个可拖动的列表。我按照他们页面上的教程创建了这个-

function DraggableList(props) {
  const { classes, tableHeaders, tasksList } = props;
  return (
    <div>
      <Droppable droppableId="id">
       {(provided) => (
         <div ref={provided.innnerRef} {...provided.droppableProps}>  
           {tasksList && tasksList.slice(0,5).map((row, index) => (
              <Draggable draggableId={row.id} index={index}>
                {(provided)=> (
                  <div index={index} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> 
                    <Paper className={classes.root} key={row.id}>
                      <Grid container xs={12} className={classes.topContainer}>
                        <Grid item xs={2}>
                          <IconButton><DragIndicatorIcon className={classes.dragIcon}/></IconButton> </Grid>
                        <Grid item xs={10}>
                          <Typography className={classes.activity} variant="body2">{row.name}</Typography>
                        </Grid>
                      </Grid>
                    </Paper>
                   </div>
                )}
              </Draggable>
            ))}
          </div>
        )}
      </Droppable>
    </div>
  );
}

它不停地给我

Error: Invariant failed: 
    provided.innerRef has not been provided with a HTMLElement.

    You can find a guide on using the innerRef callback functions at:
    https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md

错误，尽管我在一个'div‘上设置了innerRef。这里的错误是什么？

Answer 1

打字错误：

ref={provided.innnerRef}

Answer 2

我也有同样的问题，但我的解决方案却截然不同。我犯了一个愚蠢的错误，用大括号代替了圆括号。所以我就这么做了：

{(provided) => {

而不是：

{(provided) => (

除了“HTMLElement没有提供provided.innerRef”之外，没有任何错误指示。

Answer 3

你把你的

provided={已提供}

在同一个div中，它将开始工作。我也有同样的问题，但它得到了解决。