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

Question

我已经实现了一个View组件，其中包含一个FlatList，它呈现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> 
) 
};