如何将道具从 FlatList 项目传递给 Modal？

Question

我已经实现了一个包含 FlatList 的 View 组件，它呈现 TouchableHighlights。我还实现了一个 Modal 组件，我想在各个地方导入它，包括呈现 FlatList 的组件。

我已经设法从外部打开模态（通过移交可见性道具，通过 nextProps 访问它并将模态状态值“modalVisible”设置为此）并从内部关闭它（只需通过更改它的状态值“ modalVisible")。

但是：我还想将数据从每个 FlatLists 项传递给模式。呈现为 TouchableHighlight 的项目应该打开模态 onPress 并且模态应该包含来自项目的数据（在下面的代码中，这将是项目 id）。如何实现将数据传递给模态？我不知何故无法使用 nextProps 让它工作。这似乎更多是与从 FlatLists 项而不是 Modal 中设置状态有关的问题。

模态：

export default class ModalView extends React.Component {
constructor() {
  super();
  this.state = {
    modalVisible: false,
    id: null,
  };
}

componentWillReceiveProps(nextProps) {
  this.setState({
    modalVisible: nextProps.modalVisible,
    id: nextProps.id,
  })
}

render() {
  return (
     <Modal
      animationType="slide"
      transparent={ true }
      visible={ this.state.modalVisible }
      onRequestClose={() => { this.props.setModalVisible(false) }}
     > 
       <View>
         <View>
          <Text>{ this.state.id }</Text>
          <TouchableHighlight
            onPress={() => { this.props.setModalVisible(false) }}
          > 
            <Text>Hide Modal</Text>
          </TouchableHighlight>
         </View>
       </View>
     </Modal>
  )
}
}

FlatList 渲染 TouchableHighlights：

export default class RecentList extends React.Component {
constructor() {
  super();
  this.state = {
    modalVisible: false,
    id: null,
  }
}

_onPressItem(id) {
  this.setState({
    modalVisible: true,
    id: id,
  });
};

_renderItem = ({item}) => {
  return (
    <TouchableHighlight
      id={item.id}
      onPress={this._onPressItem}
    >
      <View>
        <Text>{id}</Text>
      </View>
    </TouchableHighlight>
  )
};

render() {
  let data = realm.objects('Example').filtered('completed = true')
             .sorted('startedAt', true).slice(0, 10)
  return (
    <View>
      <ModalView
        modalVisible={ this.state.modalVisible }
        setModalVisible={ (vis) => { this.setModalVisible(vis) }}
        id={ this.state.id }
      />
      <FlatList
        data={data}
        renderItem={this._renderItem}
        keyExtractor={(item, index) => index}
      />
    </View>
  )
}
}

Answer 1

你错过的一个小错误......

_renderItem = ({item}) => {
  return (
    <TouchableHighlight
      id={item.id}
      onPress={() => this._onPressItem(item.id)} // Your not sending the item.id
    >
      <View>
        <Text>{id}</Text>
      </View>
    </TouchableHighlight>
  )
};