如何在 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 = {

  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 />

粗略演示