动态创建没有字符串的引用答案

【问题标题】：Dynamically creating refs without strings动态创建没有字符串的引用
【发布时间】：2019-02-04 15:59:55
【问题描述】：

编辑：我们正在使用与问题相关的 React 16.2.0 (see this answer)。

据我所知，这是创建 ref 的公认方式（至少对于我们的 react 版本）：

<div ref={(r) => { this.theRef = r; }}>Hello!</div>

然后它可以像这样使用：

componentDidMount() {
  if (this.theRef) {
    window.addEventListener('scroll', this.handleScroll);
  }
}

这很好用。但是，如果我想创建一个 动态命名的 ref，比如作为循环的一部分，我该如何命名 ref？

使用现在已经过时的术语，我想要一些类似的东西：

<div ref="{refName}">Hello!</div>

谢谢！

【问题讨论】：

帖子标题具有误导性。请更新。

标签： javascript reactjs

【解决方案1】：

试试吧：

<div ref={refName}>Hello!</div>

【讨论】：

“在 ref 属性中使用字符串文字已被贬低。” see here

【解决方案2】：

对于地图，您需要一个键，所以也许您可以使用该键映射到一个对象？像这样：

this.myRefs = {}

doSomethingToRef = (key) => {
  this.myRefs[key].doSomething()
}

return (
  myValues.map(value => (
    <div key={value.key} ref = {r => {this.myRefs[value.key] = r}}>{...}</div>
  ))
)

【讨论】：

这是我最初的想法，它确实有效。谢谢。

【解决方案3】：

像这样使用ref：

在类构造函数中定义 refName：

this.refName = React.createRef()

在你的元素中分配 ref：

<div ref={this.refName} id="ref-name">Hello!</div>

要访问 refName，请使用 current:

this.refName.current

例子：

if (this.refName.current.id == 'ref-name') {
  window.addEventListener('scroll', this.handleScroll);
}

更新

根据您的评论，要在旧版本中使用 ref，您可以这样使用：

<div ref={(el) => this.refName = el} id="ref-name">Hello!</div>
{/* notice double quote is not used */}

访问：

this.refs.refName

例子：

if (this.refs.refName.id == 'ref-name') {
  window.addEventListener('scroll', this.handleScroll);
}

为了更好地做到这一点，您可以使用callback pattern。

【讨论】：

哦，我多么希望是这样。可悲的是，我们使用的是 16.2，我认为这不是 option
已更新...如果您还有其他问题，请告诉我。
我得到“createRef() 不是函数。”我不认为 React.createRef() 存在于 React 16.2.0 中。
旧版本不需要这个。
您可以关注帖子中链接的回调参考。

【解决方案4】：

[short-id][1] 可能是个不错的人选！

它有如下方法：

ids.store('foo');  // "8dbd46"
ids.fetch('8dbd46');  // 'foo'
ids.fetch('8dbd46');  // undefined
ids.configure(Object conf)



$ npm install short-id

RefsCmp.js

var shortid = require('shortid');

const RefsList = (newrefs) = > (
   {newrefs.map(item => (
      <div ref={shortid.generate()}>Hello!</div>
   ))}
)

export default RefsList;

【讨论】：