如何將道具從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> 
) 
};