2016-05-23 67 views
4

当我阅读更新的React docs about refs时,我有点惊讶。虽然他们在React首页上的例子仍然使用this.refs.textarea,但他们后来“推荐”不再使用这种方法。替代“主要遗产”ref字符串属性?

但是有什么选择?我发现太长的内联代码混淆并调用一个函数,如{() => this.initChartLibrary() }() =>需要不会丢失上下文到this)需要构建一个方法,给出错误的印象,它可以被重用。

换句话说,我仍然喜欢使用String方式。但是因为我担心他们会贬低它,所以我想知道,如果还有其他方法吗?

+0

您能否详细说明您的用例与参考?作为一个旁注,恕我直言废弃refs听起来不像React会做的事情,因为它有你不能用普通道具获得的用法(比如真正的DOM操作) – omerts

+0

我有完全相同的问题。这是超级混乱,尤其是像我这样的React初学者。我应该使用它还是不应该? – Unless

回答

3

据我所知,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