将带参数的回调传递给父组件

Question

我在问一些可能无足轻重的事情，但这一直在困扰着我一段时间。

比方说我们有呈现一些按钮的子组件：

const Picker = ({ data, label, visible, cancelCallback, onPressCallback }) => { 

    function renderRow (data) { 
    return data.map((el) => { 
     return (
     <TouchableOpacity 
      style={listViewItemContainer} 
      key={el.label} 
      onPress={} 
     > 
      <Text style={listViewItem}> { el.label } </Text> 
     </TouchableOpacity> 
    ); 
    }); 
    } 

    return (
    <Modal 
     visible={visible} 
     animationType="fade" 
     onRequestClose={() => {}} 
     transparent={true} 
    > 


      <View style={listViewContainerStyle}> 
      { renderRow(data) } 
      </View> 


    </Modal> 
); 
}; 

现在，当我按我想要做一个回调到父的按钮中的一个，但我想通过类似标签的一些参数被按下的元素。例如：

<TouchableOpacity 
    style={listViewItemContainer} 
    key={el.label} 
    onPress={onPressCallback(el.label)} // onPressCallback is a Prop passed to the child 
> 
    <Text style={listViewItem}> { el.label } </Text> 
</TouchableOpacity> 

然后处理父组件中的逻辑。 我该怎么做？

Answer 1

像这样。

onPress={() => onPressCallback(el.label)}