1

我正在尝试使用 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 。这里有什么错误

4

4 回答 4

3

错字：

ref={provided.innnerRef}
于 2019-11-28T02:37:35.270 回答
1

我有同样的问题，但我的解决方案完全不同。我犯了使用大括号而不是括号的愚蠢错误。所以我做了：

{(provided) => {

并不是：

{(provided) => (

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

于 2020-06-17T12:57:14.127 回答
0

你把

提供={提供}

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

于 2019-10-03T07:59:54.860 回答
0

我有同样的问题，我使用了样式组件。我只是在 styled-component 元素上设置了 ref 道具，它对我有用。

我的意思是：

const StyledElement = styled.div`
   //the css goes in here
`; 

<StyledElement ref={provided.innerRef} {...provided.droppableProps}>
   //The rest of the code goes here
<StyledElement/>
于 2021-04-29T10:14:58.883 回答