Создание сложного и универсального пользовательского интерфейса в React - PullRequest
Новая
       14

Создание сложного и универсального пользовательского интерфейса в React

0 голосов
/ 28 февраля 2019

Я работаю в страховой компании, и в настоящее время мы создаем новый портал для клиентов.

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

У нас есть много различных типов контрактов, некоторые из которых очень похожи друг на друга.У нас может быть до 100 различных вариантов.Теперь мы начали размещать условный рендеринг здесь и там, потому что некоторые части не нужно рендерить в некоторых случаях (в зависимости от типа контракта или типа клиента, или ...).Но мы реализовали только 10% всех контрактов, и теперь он начинает выходить из-под контроля.У нас много if заявлений вокруг.Код становится все труднее и труднее тестировать и поддерживать.

Мы используем GraphQL с Relay для общения с бэкэндом.

Так что мой вопрос : что лучшеподход к созданию очень общих "просмотров" в React?

1 Ответ

0 голосов
/ 28 февраля 2019

Это подходы, которые я бы использовал для решения проблемы.

  • рендеринг массива условных элементов

    • рендеринг массива условных элементов
    • разделение условных обозначений для сохранения читабельности, например, isCorporateClient()
    • таким образом, вы можете иметь общий компонент детализации договора, который условно отображает кучуразные строки на основе пары читаемых условий

  • разделить запросы - разделить списки

    • скорее всего, у вас естьполе contractType, по которому вы запрашиваете, поэтому ваши списки контрактов можно разделить по типу
    • , если вы пойдете по этому маршруту, у вас есть уверенность, что все возвращаемые элементы имеют определенный тип (так что вы по крайней мере получитенекоторая широкая группировка, поэтому такие поля, как beneficiary, которые имеют отношение только к страхованию жизни, не будут учитываться при рендеринге, например, TravelInsuranceDetail компонент)

  • реструктурировать данные

    • задЕсли вы имеете какое-то влияние на бэкэнд / можете попросить его изменить
    • вы, вероятно, захотите получить что-то вроде этого 
{
  id
  type {
     name
     id
  }
  signedDate
  expirationDate
  signedBy {
    firstName
    lastName
    fullName
    idDocumentNumber
  }
  benefits {
    id
    type {
      name
    }
    title
    condition
  }
  attachments {
     id
     title
     link
  }

}
  • Обратите внимание, что все вышеперечисленное можно запросить отдельно, если это необходимо.Я не знаком со спецификой реле, но с клиентом apollo вы бы сделали что-то вроде 
const BenefitList = ({ benefits }: ContractBenefits[]) => 
 <Query query={BENEFITS} variables={{ contractId }}>
   {({ loading, error, data }) => {
            if (loading) {
              return <Loader message="Loading Contract Benefits" />;
            }

            if (error) {
              return <p>Error :( {error}</p>;
            }

            return <Benefits items={data.benefits} />;
          }}
 </Query>

Надеюсь, это поможет!

...