Question

当我阅读更新的React docs about refs时，我有点意外。虽然他们在React首页上的示例仍然使用this.refs.textarea，但他们后来“建议”不再使用此方法。

但是替代方案是什么？我发现太长的内联代码令人困惑并且调用了一个函数，比如{() => this.initChartLibrary() }（() =>需要不丢失this的上下文）需要构建一个给出错误印象的方法它可以重复使用。

换句话说，我还是喜欢使用String方式。但是，因为我担心他们会弃用它，我想知道，如果还有其他办法吗？

Answer 1

据我所知，ref字符串的主要替代方法实际上是ES6样式的回调函数。

所以：

<textarea ref="myTextArea">
...
</textarea>

// Where refs are then accessed by `this.refs.myTextArea` to perform any operations

以基本形式成为：

<textarea ref={ (ref) => this.myTextArea = ref }>
...
</textarea>

// Where refs are then accessed by `this.myTextArea`

这可能非常强大，因为React中的ref属性会自动接收引用的组件作为参数，如果我们愿意的话，它允许我们立即对它执行回调操作。这可以用一个简单的形式，如上所述，将该引用分配给this.myTextArea，或者您可能已经在文档中注意到，您可以更直接地执行以下操作：

<input 
  ref = {(input) =>
          { if (input != null) {input.focus()} }
  } />

话虽这么说，虽然这有时意味着你可以用最少的行数表达你的代码，但它肯定会牺牲可读性。如果您只是想要保存对组件的引用以便在事件处理程序中使用（通常就是这种情况），那么使用ref字符串实际上仍然是最干净的方法。

我真的不希望它们在没有警告的情况下被弃用，因为它们在React＆amp;保持方便，但如果他们是你最好的选择，那就是一个简单的重构(ref) => this.myRef = ref然后通过this.myRef访问您的参考号。