Когда добавление условных выражений становится слишком много в React?

Question

В этом вопросе в качестве примера используется React Native, но он может применяться к React в целом.

Учитывая компонент FlatList, который отображает разные списки в зависимости от того, какой список выбрал пользователь, когда добавляет условные выражения для указанного c список в этом компоненте стал слишком большим?

Например, добавив это в компонент, просто чтобы получить поведение для этого указанного c списка:

if (this.props.list = 'groceryList') {
  do this...
}

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

Лучше ли просто создавать компонент только для этого списка, так как он добавляет эти проверки и добавляет свертку? Это почти похоже на написание компонента внутри компонента и не использование компонента, как это было первоначально задумано.

Answer 1

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

   function Greeting(props) {
      const isLoggedIn = props.isLoggedIn;
      if (isLoggedIn) {
        return <UserGreeting />;
      }
      return <GuestGreeting />;
    }

    ReactDOM.render(
      // Try changing to isLoggedIn={true}:
      <Greeting isLoggedIn={false} />,
      document.getElementById('root')
    );

Также вы можете использовать встроенный условный оператор или логические операторы внутри метода рендеринга.

    render() {
      const isLoggedIn = this.state.isLoggedIn;
      return (
        <div>
          {isLoggedIn
            ? <LogoutButton onClick={this.handleLogoutClick} />
            : <LoginButton onClick={this.handleLoginClick} />
          }
        </div>
      );
    }

шаблон называется условным рендерингом. https://reactjs.org/docs/conditional-rendering.html

https://reactpatterns.com/ [поиск секции условного рендеринга]