对从父模态到子模态的本机传递数据做出反应

Question

我有一个 FlatList 和一个 ListItem 一起呈现，这样我就可以在我的 ListTrips 组件中获取特定行的 onPress 数据。如下图我的console.warn会打印选中项的数据

组件 A

 import Component B from ...
 ....
  toggleModalConfirmTrip = item => {
console.warn(item);
// this.props.navigation.navigate('SelectedTrip', { item });

if (this.ModalConfirmTrip) {
  this.ModalConfirmTrip.toggleModal();
}
};


 <ListItem
 onPress={() => this.toggleModalConfirmTrip(item)}
 ....

但在我的 ModalConfirmTrip.js 中，我无法访问该项目。我的问题是如何在组件 B 中访问它？我试过玩弄道具和状态，但似乎无法正确处理。

组件 B

export default class ModalConfirmTrip extends Component {
constructor(props) {
super(props);
this.state = {
  locationFrom: '',
  locatonTo: '',
  isVisible: false,
  id: null,
 };
}

toggleModal = () => {
this.setState({ isVisible: !this.state.isVisible });
 };

// API Call to update trip to active



render() {
const { isVisible, item } = this.state;

console.warn('Modal', this.state);
console.warn(this.props);

return (
  <View style={styles.container}>
    <Modal
      onBackdropPress={() => {
        this.toggleModal();
      }}
      isVisible={isVisible}
      hideModalContentWhileAnimating
    >
      <View style={styles.modalViewContainer}>
        <Text style={styles.title}>{this.state.item}</Text>

Answer 1

找到解决方案！

所以你必须在组件 A 中将 item 作为 prop 传递

    <ModalConfirmTrip
      ref={ref => {
        this.ModalConfirmTrip = ref;
      }}
      item={this.state.item}
    />

另请注意，您不能传递数组对象，所以我只传递了行程的 ID。希望这对某人有所帮助。

对从父模态到子模态的本机传递数据做出反应

react native passing data from parent to child modal

state

react-native

react-native-flatlist

react-props