Как включить результат комбинированной функции в оператор Switch в ReactJS - PullRequest
Новая
       9

Как включить результат комбинированной функции в оператор Switch в ReactJS

0 голосов
/ 24 апреля 2020

У меня есть приложение, которое спрашивает вас о ваших интересах, и пользователь может выбрать любую комбинацию из 6 вариантов. У меня есть алгоритм, все готово и работает, но я не уверен, как перевести этот результат в компонент React.

Мой логин c выглядит следующим образом:

Если пользователь выбрал комбинацию FE и UX в виде ['FE', 'UX'], то отобразится <FEComponent> AND <UXComponent>. Другой пример:

Если пользователь выберет FE, UX и BE, массив будет ['FE', 'UX', 'BE'], а отображаемые компоненты будут <FEComponent>, <UXComponent> и <BEComponent>.

Данные, с которыми я работаю, - это просто один массив с 6 потенциальными опциями:

['FE', 'BE', 'FS', 'GD', 'WD', 'UX']

Вот код, который у меня есть на данный момент: 

  const Dashboard = ({
  getCurrentProfile,
  deleteAccount,
  auth: { user },
  profile: { profile, status, location, skills, interests }
}) => {
  useEffect(() => {
    getCurrentProfile();
  }, [getCurrentProfile]);

  const profileShow = profile !== null ? console.log(profile.interests) : null;

  return (
    <>
      <Container fluid>
        <Row>
          <Col lg={12}>
            {profile !== null ? (
              <Container>
                <h2>Dashboard</h2>
                <p>
                  Here are all the resources we have put together for you so you
                  can make the best of your tech career!
                </p>
              </Container>
            ) : (
              <Container>
                <h2 className="text-center">Just a few questions for ya!</h2>
                <p className="text-center">
                  To better your experience, answer these few questions
                </p>
                <ProfileForm />
              </Container>
            )}
          </Col>
        </Row>
      </Container>
    </>
  );
};

А вот скриншот того, что я описываю:

enter image description here

1 Ответ

1 голос
/ 24 апреля 2020

Если я понимаю ваше желаемое поведение, то я думаю, что это приблизит вас к тому, что вы ищете.

(1) Создайте карту комбинаций типов с компонентом, например 

const comboComponentMap = {
  FE: FEComponent,
  BE: BEComponent,
  FS: FSComponent,
  GD: GDComponent,
  WD: WDComponent,
  UX: UXComponent
};

(2) Сопоставить некоторый массив выбранных / проверенных / et c .. типов с компонентом, который вы хотите отобразить 

typesArray.map(type => {
  const Component = comboComponentMap[type];
  return <Component key={type} />;
})

Пример: задано ["FE", "UX"]

<FEComponent />
<UXComponent />

Пример: дано ["FE", "BE", "UX"]

<FEComponent />
<BEComponent />
<UXComponent />

Rough Demo

Edit great-field-3pu2o

...