javascript - 如何在 ReactJS 中的 Switch 语句中包含组合函数的结果

Question

我有一个应用程序会询问您的兴趣，用户可以输入 6 个选项的任意组合。我已经完成并运行了算法，但我不确定如何将该结果转换为 React 组件。

我的逻辑如下:

如果用户选择 FE 的组合和UX形式为['FE', 'UX'] ，然后显示<FEComponent>和 <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>
    </>
  );
};

这是我所描述内容的屏幕截图:

Answer 1

如果我理解您想要的行为，那么我认为这会让您接近您所追求的目标。

(1) 创建类型组合到组件的映射，示例

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

(2) 将选定/选中/等类型的一些数组映射到要显示的组件

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

示例:给定["FE", "UX"]

<FEComponent />
<UXComponent />

示例:给定["FE", "BE", "UX"]

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

粗略演示