在平面列表项中将本机函数反应为道具

Question

您好，我在调用子组件中作为 prop 传递的函数时遇到问题。我正在尝试仅使用相关代码行来复制我的代码：

class Parent extends Component {
  constructor(props) {
    super(props)
    this.press = this.press.bind(this)
  }
  press(param) {
    console.log(param)
  }
  renderItem = ({item}) => (
    <Child item={item} press={this.press} />
  )

  render() {
    return (
      <FlatList renderItem={this.renderItem} />
    )
  }
}

class Child extends PureComponent {

  handlePress(param) {
    // do some stuff
    // call parent function
    this.props.press(param)
  }
  render() {
    const { id } = item
    return <Button onPress={() => this.handlePress(id)} />
  }
}

在按下按钮的那一刻没有任何反应，我已经在使用类似这样的东西：

<Child press={(param) => this.press(param)} />

但是这会导致性能问题。

我怎样才能使这个工作？

Answer 1

这可能是一个很好的解决方案：不要将引用从按钮传递给父级 class，而是从子级 class 中移除按钮并改为使用 TouchableOpacity。

import {
  TouchableOpacity,
  View,
} from 'react-native'
class Parent extends Component {
  constructor(props) {
    super(props)
  }
  press(param) {
    console.log(param)
  }
  renderItem = ({item}) => (
      <TouchableOpacity onPress={()=>{this.press(item.id)}}>

        <Child item={item} />

      </TouchableOpacity>

  )

  render() {
    return (
      <FlatList renderItem={this.renderItem} />
    )
  }
}

class Child extends PureComponent {

  render() {
    // just your view content
    const { id } = item
    return <View />
  }
}

Answer 2

经过一段时间的测试，我得出了这个解决方案：

class Parent extends Component {
  press = (param) => {
    console.log(param)
  }

  renderItem = ({item}) => (
    <Child item={item} press={this.press} />
  )

  render() {
    return (
      <FlatList renderItem={this.renderItem} />
    )
  }
}

class Child extends Component {

  handlePress(param) {
    // do some stuff
    // call parent function
    this.props.press(param)
  }

  render() {
    const { id } = item
    return <Button onPress={() => this.handlePress(id)} />
  }
}

在平面列表项中将本机函数反应为道具

React native function as prop in flatlist item

reactjs

react-native

react-native-flatlist