Использование Grid с SortableJS

Question

Я использую SortableJS для React и пытаюсь реализовать горизонтальный Grid, чтобы конечный результат выглядел так:

Мне удалось это сделать, однако функция сортировки вообще не работает. Я думаю, что это как-то связано с атрибутом tag. Когда я пытаюсь tag={Grid} я получаю следующую ошибку:

Сортируемый: el должен быть HTMLElement, а не [объектный объект]

Любые идеи, как я могу реализовать Grid в tag атрибут? Вот мой код:

     <Grid container>
            <Sortable options={{ fallbackOnBody: true, group: "items", handle: reorderHandle }} tag={Grid} onChange={handleChange}>
                {items.map((item, index) =>
                    <Paper key={index} data-id={index} className={classes.item} elevation={0}>
                        <ButtonHelper {...getHandleClass(editable)} key={index} icon={
                            <Badge badgeContent={index + 1} color="default">
                                {editable && <ReorderIcon />}
                            </Badge>}
                        />
                        <Grid item xs={4} key={index}>
                            <div className={classes.gridItem}>
                                <GalleryInput className={classes.image} style={{ width: '300px' }} label="image" source={`${source}[${index}].image`} />
                                <br></br>
                                <TextInput label="desc" source={`${source}[${index}].desc`} />
                                {editable && <ButtonHelper icon={<RemoveIcon />} onClick={handleRemove(index)} className={classes.left} />}
                            </div>
                        </Grid>
                    </Paper>
                )}
            </Sortable>
        </Grid>

Спасибо за любую помощь.

Answer 1

Поскольку вы используете пользовательский компонент, тэг prop принимает его только как компонент forwarRef.

Так что вам нужно обновить таким образом.

Образец фрагмента

// This is just like a normal component, but now has a ref.
const CustomComponent = forwardRef<HTMLDivElement, any>((props, ref) => {
  return <div ref={ref}>{props.children}</div>;
});

export const BasicFunction: FC = props => {
  const [state, setState] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" }
  ]);

  return (
    <ReactSortable tag={CustomComponent} list={state} setList={setState}>
      {state.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </ReactSortable>
  );
};