Question

我绘制了一个模式/弹出列表，并通过状态对其进行控制。

renderGenericOKModal({ title, message, visibleStateVar }) {
    return (
      <PromptModal
        alertTitle={title}
        alertMessage={message}
        isVisible={this.state[visibleStateVar]}
        onRightButtonPress={() =>
          this.setState({ [visibleStateVar]: false });
        }
        rightButtonLabel={strings.labelOK}
      />
    );
  }

我在媒体上看到一些评论，说上面的代码未优化，因为它为onRightButtonPress创建了许多不必要的相似函数。因此，我尝试执行以下操作，但不确定是否确实有任何不同？

genericOKButtonOnPress = ({ visibleStateVar }) => {
  this.setState({ [visibleStateVar]: false });
};

onRightButtonPress={() =>
  this.genericOKButtonOnPress({ visibleStateVar })
}

但是上面的代码仍在创建每个与我的原始代码相同的匿名函数对象吗？

更新：

onRightButtonPress={this.genericOKButtonOnPress.bind(null, {
  visibleStateVar
})}

使用bind对我的案子应该有好处？

Answer 1

使用arrow function定义onRightButtonPress，而无需匿名功能。

onRightButtonPress = () => this.genericOKButtonOnPress({ visibleStateVar }) //inline

或

onRightButtonPress = () => {
  this.genericOKButtonOnPress({ visibleStateVar })
} //using block

PromptModal 应该是

<PromptModal
  alertTitle={title}
  alertMessage={message}
  isVisible={this.state[visibleStateVar]}
  onRightButtonPress=this.onRightButtonPress
  rightButtonLabel={strings.labelOK}
/>

如何通过引用调用函数

1 个答案: