Решение для JSX реквизита не использовать встроенные функции стрелки?

Question

Недавно я выяснил причины, по которым мне не следует использовать встроенные функции стрелок для подпорок компонентов, но я не знаю, каковы рекомендуемые решения.Вот пример моего использования функции:

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

, которая позволяет мне иметь очень простую и понятную функцию переключения:

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

Единственный способвокруг этого я вижу создание специальной функции для каждого «нижнего колонтитула», но, на мой взгляд, это идет вразрез с лучшими практиками использования подобных функций.

Answer 1

Лучший способ - это использовать метод, который определен из метода render(), и таким образом в теле класса, таким образом, вы избежите недостатков встроенных функций и можете использовать функцию стрелки, и вам не нужносвязывать функции.Вы можете использовать функцию как показано ниже:

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

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

Answer 2

Вы не должны использовать встроенную функцию стрелки, чтобы передать требуемое значение.Рекомендуется связывать требуемое значение с функцией.Вы также можете связать значение условно.Это позволяет использовать один обработчик для обоих условий, как вы упомянули.Рассмотрите ниже код для того же самого:

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