Question

编辑：我们正在使用React 16.2.0，它与问题（see this answer）有关。

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

Col3    Col4    Value2
D   H   2
B   F   5
A   E   6
X   Y   8
….. ….  ….

然后可以使用类似这样的东西：

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

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

用现在过时的术语来说，我希望遵循以下内容：

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

谢谢！

Answer 1

尝试：

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

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

Answer 3

像这样使用ref：

在类构造函数中定义refName：

this.refName = React.createRef()

在您的元素中分配参考：

<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。

Answer 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;

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

4 个答案: