对从父模式到子模式的本地传递数据做出反应答案

【问题标题】：react native passing data from parent to child modal对从父模式到子模式的本地传递数据做出反应
【发布时间】：2019-04-27 13:28:25
【问题描述】：

我有一个与 ListItem 一起呈现的 FlatList，以便我可以在我的 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>

【问题讨论】：

标签： react-native state react-native-flatlist react-props

【解决方案1】：

找到了解决办法！

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

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

还要注意你不能传递数组的对象，所以我只传递了行程的 id。希望这对某人有所帮助。

【讨论】：