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

Posted 2023-04-15

【中文标题】如何将道具从 FlatList 项目传递给 Modal？

【英文标题】：How to pass props from FlatList item to Modal?

【发布时间】：2018-03-11 08:06:19

【问题描述】：

我已经实现了一个包含 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>
  )

【参考方案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>
  )
;

【讨论】：

也许还值得一提Why Arrow Functions and bind in React’s Render are Problematic。