android - react js createRef() 返回未定义

Question

我对 reactjs 很陌生。目前正在使用 expo.io 使用 ReactJS native 开发移动应用程序。在我的项目中，我使用 webView 来显示内容。它工作正常。但是当我尝试实现 goBack() 时遇到问题。

我所遵循的示例: https://blog.defining.tech/adding-a-back-button-for-react-native-webview-4a6fa9cd0b0

由于 this.refs 已贬值，我尝试将其更改为 createRef()另一个引用。我遵循的是: https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component

执行 goBack() 时，流出 'undefined is not an object'。

我可以知道解决方案吗？

这是我的代码:

enter code here
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  WebView
} from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.webRef = React.createRef();     
    this.state = { canGoBack: false };
  }

  render() {
    return (
      <View style={styles.container}>
        <WebView
          ref={this.webRef}
          style={{flex: 1}}
          onNavigationStateChange=
            {this.onNavigationStateChange.bind(this)}
          source={{uri: 'http://www.google.com'}}
          /> 
          <View style={styles.bottombar}>
          <TouchableOpacity
            disabled={!this.state.canGoBack}
            onPress={this.onBack.bind(this)}
            >
            <Text style={this.state.canGoBack ? styles.topbarText : styles.topbarTextDisabled}>Go Back</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  onBack() {
    // error: undefined is not an object 
    this.webRef.current.goBack();
  }


  onNavigationStateChange(navState) {
    this.setState({
      canGoBack: navState.canGoBack
    });
  }
}

Answer 1

不是 ref 未定义，而是 this.webRef.current 未定义。

你可以只使用this.webRef.goBack()