时间戳

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

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

问题描述

我有一个无状态/功能组件，它获取具有两个属性的对象数组，即标题和onPress()作为道具。

现在对于Button组件的 onPress 事件，我想调用这个对象的 onPress 函数以及一个动作创建者（它也作为道具传递给这个组件）。

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

下面是一个片段代码：

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

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

标签： reactjsreact-native

解决方案

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

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 本身没有太大区别。

推荐阅读