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

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设为sortable

/**
 * 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()} />

之后一样获取之前的引用

这里是完整代码：

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
})

但是这里NOT forwardRef的真正使用

---

嗯...选择你想要的。