javascript - 如何避免在 map 迭代 block 中创建多个新函数

Question

例如，我有下面的代码，因为我的 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> )

Answer 1

如果您不希望为每个渲染重新创建您的函数，您可以为 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>
    );
}