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>
    );
}

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

1 个答案: