如何使用 react-sortable-hoc 访问 refs，withref

Question

我尝试在react-sortable-hoc 中使用“withref”，并且我需要让我的父组件访问子组件以进行一些我需要在父端调用的调用。我什至不确定在哪里调用 getWrappedInstance，它似乎提供了对子组件的访问权限。

我知道forwarding，但似乎react-sortable-hoc 有不同的实现。

更具体地说，我有这样的事情：

const SortableItem = SortableElement((props) => (
  <div className="sortable">
    <MyElement {...props}/>
  </div>
), {withRef: true});

const MidasSortableContainer = SortableContainer(({ children }: { children: any }) => {
  return <div>{children}</div>;
}, {withRef: true});

<MySortableContainer
  axis="xy"
  onSortEnd={this.onSortEnd}
  useDragHandle
>{chartDivs}</MySortableContainer>

在我使用 HOC 之前，我能够做到以下几点

const chartDivs = elements.map(({childName}, index) => {
      return <MyElement
              ref={r => this.refsCollection[childName] = r}
...

有没有人知道如何在使用 HOC 包装后达到同样的效果？谢谢。

Answer 1

密钥来自源代码：https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableElement/index.js#L82

getWrappedInstance() 函数。

我猜，后面是你的源代码：

// this is my fake MyElement Component
class MyElement extends React.Component {
  render () {
    return (
      <div className='my-element-example'>This is test my element</div>
    )
  }
}

// this is your origin ListContainer Component
class OriginListContainer extends React.Component {
  render () {
    const elements = [
      { childName: 'David' },
      { childName: 'Tom' }
    ]

    return (
      <div className='origin-list-container'>
        {
          elements.map(({ childName }, index) => {
            return <MyElement key={index} ref={r => this.refsCollection[childName] = r} />
          })
        }
      </div>
    )
  }
}

现在你导入react-sortable-hoc

import { SortableElement, SortableContainer } from 'react-sortable-hoc'

首先你创建一个新的Container Component:

const MySortableContainer = SortableContainer(({ children }) => {
  return <div>{children}</div>;
})

然后让 MyElement 可排序

/**
 * Now you have new MyElement wrapped by SortableElement
 */
const SortableMyElement = SortableElement(MyElement, {
  withRef: true
})

这里是导入：

• 您应该使用SortableElement(MyElement, ... 到SortableElement((props) => <MyElement {...props}/>，第二个计划将使ref 成为null
• { withRef: true } 让您可以通过getWrappedInstance 获得参考

好的，现在你可以像 ref={r => this.refsCollection[childName] = r.getWrappedInstance()} />

一样获得之前的 ref

这里是完整的代码：

const MySortableContainer = SortableContainer(({ children }) => {
  return <div>{children}</div>;
})

/**
 * Now you have new MyElement wrapped by SortableElement
 */
const SortableMyElement = SortableElement(MyElement, {
  withRef: true
})

class ListContainer extends React.Component {
  refsCollection = {}

  componentDidMount () {
    console.log(this.refsCollection)
  }

  render () {
    const elements = [
      { childName: 'David' },
      { childName: 'Tom' }
    ]

    return (
      <MySortableContainer
        axis="xy"
        useDragHandle
      >
        {
          elements.map(({ childName }, index) => {
            return (
              <SortableMyElement
                index={index}
                key={index}
                ref={r => this.refsCollection[childName] = r.getWrappedInstance()} />
            )
          })
        }
      </MySortableContainer>
    )
  }
}

追加

呃……

在我说之前：你应该使用SortableElement(MyElement, ... 到SortableElement((props) => <MyElement {...props}/>，第二个计划将使ref 属性成为null

如果你真的想使用回调函数，你可以使用如下：

const SortableMyElement = SortableElement(forwardRef((props, ref) => <MyElement ref={ref} {...props} />), {
  withRef: true
})

但这里不是真正使用forwardRef

---

嗯...选择你想要的。