未动态呈现的组件

Question

我正在尝试在我的组件中动态渲染组件，如下所示：

const renderPeriod = (code, fieldId) => {
  switch (code) {
    case 'work' || 'vacation':
      return <WorkOrVacation fieldId={fieldId} />;
    case 'sickness:
      return <Sickness fieldId={fieldId} />;
    default:
      return null;
  }
};

export const PeriodeContent= ({
  fieldId,
  confirmed,
  employer,
  code,
}) => (
  <div className={styles.period}>
    {confirmed=== false &&
      <div>
        <Element>{employer}</Element>
        <VerticalSpacer space={2} />
        {renderPeriod(code, fieldId)}
      </div>
    }
  </div>
);

在控制台中检查代码时，我可以看到我正在进入函数 renderPeriod，但没有渲染任何内容。我尝试过硬编码，只返回这样的字符串：

switch (code) {
    case 'work' || 'vacation':
      return 'test' // <WorkOrVacation fieldId={fieldId} />;

这也不起作用。我已经仔细检查了我是否发送了正确的代码，并且我正在发送工作代码，所以我不知道这段代码有什么问题，为什么没有呈现任何内容？

Answer 1

您不能在 case 语句中使用 ||，因为 'work' || 'vacation' 的计算结果只是 'work'。使用多个案例可以让你做你想做的事：

..
switch (code) {
  case 'work':
  case 'vacation':
    return <WorkOrVacation fieldId={fieldId} />;
  case 'sickness:
..