Question

我有一个无状态/功能组件，它有一个对象数组，有两个属性，即标题和 onPress（）< / strong>作为道具。

现在，对于按钮组件的onPress事件，我想称之为对象的onPress功能以及动作创建者（这也是作为道具传递给这个组件）。

有没有办法只创建 onPress事件处理程序的一个实例，它会调用这两个函数（按钮对象的onPress函数和动作创建者）？

以下是代码段：

buttons.map(button => <Button title={button.title} onPress={ // call button.onPress and action creator using event handler } /> )

问这个的原因是因为每次这个组件重新渲染事件处理程序时，也会再次创建，这可能会导致性能问题。

Answer 1

不要分开道具，只需将按钮本身与动作创建者一起传递：

buttons.map(button =>
  <Button
      button={button}
      action={action}
  />
)

在你的Button组件中创建一个handlePress函数并在那里调用press。

const Button = ( {button, action }) => { 
  const handlePress = () => {
    button.onPress();
    action();
  }
  return (
    <div>
      <button onPress={handlePress}>{button.title}</button>
    </div>
  )
};

我不知道React Native，但我认为与React本身并没有太大区别。

有没有一种有效的方法在React Native的无状态/功能组件中创建onPress事件处理程序？

1 个答案: