Реагировать на нативную функцию в качестве реквизита в плоском элементе - PullRequest
Новая
       44

Реагировать на нативную функцию в качестве реквизита в плоском элементе

0 голосов
/ 19 апреля 2019

Здравствуйте. У меня проблема с вызовом функции, передаваемой в виде 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)} />

однако это вызывает проблемы с производительностью.

Как я могу сделать эту работу?

Ответы [ 2 ]

0 голосов
/ 21 апреля 2019

Через некоторое время тестирования я пришел к этому решению: 

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)} />
  }
}
0 голосов
/ 21 апреля 2019

Это может быть хорошим решением: вместо передачи ссылки от кнопки к родительскому классу удалите кнопку из дочернего класса и используйте вместо нее 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 />
  }
}
...