时间戳

首页 > 解决方案 > 我怎样才能重构这小段代码，这样我就不会在渲染中调用函数

react-native - 我怎样才能重构这小段代码，这样我就不会在渲染中调用函数

问题描述

我在这个页面上读到你不应该在渲染方法中创建函数。解决此问题的一种方法是绑定。

我的构造函数如下所示：

constructor(props) {
        super(props);
        this.idCheckAlert = this.idCheckAlert.bind(this);
}

我创建的功能：

idCheckAlert = (idForAPI) => () => {
//does some stuff with the idForApi 

}

在我的渲染中：

  <TouchableOpacity 
         style={styles.inputButton}
         onPress={() => { 
         const idForAPI = this.userId;
         this.idCheckAlert(idForAPI); 
         }}
    >

我当前的重构如下所示：

<TouchableOpacity 
     style={styles.inputButton}
     onPress={this.idCheckAlert(this.userId)} 
>

但是，我想改为在 onPress 中创建一个变量，但是当我这样做时，我收到一条错误消息，上面写着意外的令牌。有没有办法让我在 onPress 中创建一个变量，而不必创建一个函数？

标签： react-nativerefactoring

解决方案

就像你说的那样，在onPress里面创建变量不是一个好习惯，但是你可以在渲染之后做

const userId = 1;
return (
<TouchableOpacity 
     style={styles.inputButton}
     onPress={this.idCheckAlert(userId)} 
>
);

推荐阅读