如果您之前使用过React,那么您可能会熟悉一个较旧的API,该API的ref属性是一个字符串,例如ref={'textInput'},并且DOM节点的访问方式是this.refs.textInput。我们建议您不要这样做,因为字符串引用存在以下问题,并且被认为是遗留的。字符串ref 在React v16中被删除。
它们迫使React跟踪当前正在执行的组件。这是有问题的,因为它使React模块成为有状态的,并因此在捆绑中复制React模块时引起奇怪的错误。 它们是不可组合的 -如果库在传递的子项上添加了引用,则用户无法在其上添加引用。回调引用完全可以组合。 它们不适用于 Flow等静态分析。Flow无法猜测框架使字符串ref出现在this.refs其上的魔力及其类型(可能有所不同)。回调引用比静态分析更友好。 不能像大多数人期望的那样使用“渲染回调”模式(例如
class MyComponent extends Component {
renderRow = (index) => {
// This won't work. Ref will get attached to DataTable rather than MyComponent:
return <input ref={'input-' + index} />;
// This would work though! Callback refs are awesome.
return <input ref={input => this['input-' + index] = input} />;
}
render() {
return <DataTable data={this.props.data} renderRow={this.renderRow} />
}
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。