如何使用react访问参考文献-可排序-自组织，随引用

Question

我尝试在react-sortable-hoc中使用"withref“，并且我需要让我的父组件访问我需要在父端调用的一些调用的子组件。我甚至不知道该在哪里调用getWrappedInstance，它似乎提供了对子组件的访问。

我知道转发，但似乎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>

在进行临时包装之前，我能够完成以下操作

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

有没有人知道如何在临时包装之后实现同样的目标？谢谢。

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()} />之后那样得到你的前裁判了

这是完整的代码：

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, ... to SortableElement((props) => <MyElement {...props}/>__之前，第二个计划将使ref支柱成为null。

如果您真的想使用回调函数，可以使用“后”：

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

但在这里，不是，真正使用了forwardRef

呃..。选择你想要的。