React js createRef（）返回未定义

Question

我对ReactJS很陌生。目前正在使用EXPO.IO开发ReactJS原生移动应用程序。在我的项目中，我正在使用webView来显示内容。工作很好。但是当我试图实现goBack（）时遇到了一个问题。

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

由于this.refs被折旧，我尝试将其更改为createRef（）另一个ref。我遵循的是:https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-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()