Оборачивание компонента в forwardRef () (экспериментирование с библиотекой перетаскивания для React)

Я пытаюсь реализовать список, который можно сортировать в React с помощью функции перетаскивания. На главной странице они явно говорят, что это: «SortableItem Этот компонент не принимает никаких других реквизитов, кроме его дочернего. Этот дочерний элемент должен быть единственным элементом React, который может получать ссылку. Если вы передаете компонент как дочерний, он должен быть обернутым React.forwardRef () ". В моем случае у меня есть именно отдельный компонент списка, который отображается, поэтому мне нужно было бы обернуть этот компонент в forwardRef. Как лучше всего это сделать? Это мой код:

   <SortableList onSortEnd={onSortEnd} className="list" draggedItemClassName="dragged">
              {bundles && bundles.map((bundle) => (
                <SortableItem key={bundle.id}>
                <BundleView deleteBundle={deleteBundle} docId={docId} clickedBundleId={clickedBundleId} getBundleId={getClickedBundle} key={bundle && bundle.id} id={bundle && bundle.id} title={bundle && bundle.title} />
                </SortableItem>
              ))}
            </SortableList>

Я предполагаю, что компонент BundleView нужно обернуть в forwardRef. Благодарность!

Источник
Codelisting
за 1 против
Лучший ответ

Вы можете обернутьBundleView вот так:

const BundleView = React.forwardRef((props, ref) => {
    const {deleteBundle, docId ...} = props

    // Your component code here

    // The passed ref should be forwarded to the base DOM element, for example
    return <div ref={ref}>{props.children}</div>
}
  • 0
    Спасибо за ответ, но я все еще не понимаю. My BundleView - это уже отдельный компонент, который я импортирую на этой странице. Должен ли я переместить весь код внутрь константы BundleView = React.forwardRef?
Codelisting
Популярные категории
На заметку программисту