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

Question

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

我的逻辑如下：

如果用户以 的形式选择FE和的组合，则显示AND 。另一个例子：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）创建一个combo类型到Component的map，例子const comboComponentMap = {&nbsp; FE: FEComponent,&nbsp; BE: BEComponent,&nbsp; FS: FSComponent,&nbsp; GD: GDComponent,&nbsp; WD: WDComponent,&nbsp; UX: UXComponent};(2) 将一些选定/检查/等类型的数组映射到要显示的组件typesArray.map(type => {&nbsp; const Component = comboComponentMap[type];&nbsp; return <Component key={type} />;})示例：给定["FE", "UX"]<FEComponent /><UXComponent />示例：给定["FE", "BE", "UX"]<FEComponent /><BEComponent /><UXComponent />粗略演示