据我所知,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`
这可能是非常强大的,因为在发生反应ref
属性自动接收引用的组件作为一个参数,它允许我们如果我们愿意,立即执行我们的回调操作。这可以在一个简单的形式使用,如上述,该参考分配给this.myTextArea
,或者你可能已经在该文档中注意到,你可能会有点更直接,更做这样的事情:
<input
ref = {(input) =>
{ if (input != null) {input.focus()} }
} />
那尽管这有时意味着你可以用最少的行数来表达你的代码,但它肯定会牺牲可读性。如果您只是希望保存对组件的引用以便在事件处理程序中使用(通常是这种情况),使用ref
字符串仍然是最简洁的方式。
我真的没有预料到他们没有警告被弃用,因为它们使用非常巨资阵营&保持方便,但如果他们是你最好的选择将是一个简单的重构一个简单的(ref) => this.myRef = ref
然后访问您的裁判通过this.myRef
。
您能否详细说明您的用例与参考?作为一个旁注,恕我直言废弃refs听起来不像React会做的事情,因为它有你不能用普通道具获得的用法(比如真正的DOM操作) – omerts
我有完全相同的问题。这是超级混乱,尤其是像我这样的React初学者。我应该使用它还是不应该? – Unless