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

您无法在案例陈述中使用||，因为'work' || 'vacation'只是评估为'work'。使用多个案例可以让你做你想做的事：

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

组件未动态呈现

1 个答案: