React Native - ref 的折旧信息答案

【问题标题】：React Native - ref's depreciation messageReact Native - ref 的折旧信息
【发布时间】：2020-04-24 02:32:48
【问题描述】：

我正在使用签名捕获组件 (https://github.com/RepairShopr/react-native-signature-capture) 作为表单的一部分。我想通过重置功能（下面的 ClearDutyRecord）重置提交时的表单字段，并且还需要在此过程中重置签名捕获。

组件文档 (https://github.com/RepairShopr/react-native-signature-capture) 描述了一个重置函数，这是理想的 - 但调用该函数的方法（使用 refs）已被贬低。环顾 Stack Overflow，我发现这篇文章解释了这个问题 - Deprecation warning using this.refs - 但我不确定如何在 RN 中实施 - 或者我现在是否应该采取不同的方法 - 无论如何可以提供任何建议吗？

这是我目前的重置代码：

clearDutyRecord = () => {

    this.setState({
      dutyRecordViewId: 'home',
      comments:'',
      signatureName:'',
    });
    this.refs["drSig"].resetImage();
    this.props.navigation.navigate('HomeViewContainer');
  }

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

由于它是类组件，您可以使用React.createRef() 解决方案 - 这是类组件的最新方式。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

来源：reactjs docs

React Native 内部确实使用了 React.js，所以不用担心在 Native 环境中使用 React - 这与 React 相同（浏览器环境的东西特性被封装在 react-dom 包中）。

【讨论】：