如何避免在地图迭代块中创建多个新函数

修传曹

例如，我下面有代码，因为我的onPressCover需要ele.id，ele.uri，ele.title的参数，所以我现在只知道这是唯一需要这样做的方法，但是似乎产生了创建新的副作用每个TouchableOpacity的功能，是否还有其他可以避免副作用的好方法呢？

onPressCover = (id,uri,title) => {
  this.props.navigation.navigate('Introduce',{ 
    id: id, 
    uri: uri,
    title: title, 
    author: '', 
    description: ''
  }) 
}

this.stuff.map((ele,index) => (
  <TouchableOpacity style={styles.cover} key={index} onPress={() => { this.onPressStuff(ele.id,ele.uri,ele.title) }}>
    <Text numberOfLines={2} style={styles.coverText}>{ele.title}</Text>
  </TouchableOpacity> )

devserkan

如果您不想为每个渲染都重新创建函数，则可以为TouchableOpacity创建一个单独的组件，然后在其中使用回调逻辑。

this.stuff.map( ele =>
  <MyTouchableOpacity key={ele.id} ele={ele} onPress={this.onPressCover} /> )

然后在MyTouchableOpacity组件中：

const MyTouchableOpacity = ( { ele, onPress } ) => {
    const handlePress => onPress( ele.id, ele.uri, ele.title );
    return (
        <View>
            <TouchableOpacity style={styles.cover} onPress={handlePress}>
                <Text numberOfLines={2} style={styles.coverText}>{ele.title}</Text>
            </TouchableOpacity>
        </View>
    );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。