Question

我最近发现了为什么我不应该使用内联箭头函数来组件道具，但我不知道推荐的解决方案是什么。以下是我使用函数的示例：

  renderSectionFooter(isSpecialFooter) {
    return (
      <SomeFooter
        onPress={
          isSpecialFooter
            ? () => this.toggleModalVisibility('specialFooterIsVisible')
            : () => this.toggleModalVisibility('boringFooterIsVisible')
        }
      />
    );
  }

这使我有一个非常简单和干净的切换功能：

toggleModalVisibility(modalIsVisible) { this.setState({ [modalIsVisible]: !this.state[modalIsVisible] }); }

我能看到的唯一方法是为每个＆＃34;页脚＆＃34;创建一个特殊功能，但在我看来，这与具有类似功能的最佳实践相悖。

Answer 1

您不应使用内联箭头功能来传递所需的值。最佳做法是将所需的值与函数绑定。您还可以有条件地绑定值。这允许单个处理程序用于您提到的两种条件。请考虑以下代码：

renderSectionFooter(isSpecialFooter) {
   return (
     <SomeFooter
        onPress={this.toggleModalVisibility.bind(this, isSpecialFooter ? 'specialFooterIsVisible' : 'boringFooterIsVisible')}
      />
   );
}

Answer 2

最好的方法是使用从render()方法和类体中定义的方法，这样你就可以避免内联函数的缺点，你可以使用箭头函数而不是＃39} ; t需要绑定函数。您可以使用以下功能：

_someFunc = (isSpecialFooter) = () => {
    if (isSpecialFooter) {
        this.toggleModalVisibility('specialFooterIsVisible');
    } else {
        this.toggleModalVisibility('boringFooterIsVisible')
    }
}

renderSectionFooter(isSpecialFooter) {
    return (
      <SomeFooter
        onPress={_someFunc(isSpecialFooter)}
      />
    );
  }

解决JSX道具不使用内联箭头功能？

2 个答案: