I know this question has been asked before, but the usual answers bring another (potential) problem and doubts to my mind.

上下文

我有一个函数,它根据两个参数paramAparamB返回要渲染的组件.现在,代码看起来像这样:

  if (paramA === paramATypes.PRE) {
    if (paramB === paramBTypes.REQUEST) {
      detailedView = (
        <ComponentA
          requestDetails={requestDetails as RequestDetailsDto<ComponentADto>}
        />
      );
    } else if (paramB === paramBTypes.MODIFICATION) {
      detailedView = (
        <ComponentB
          requestDetails={
            requestDetails as RequestDetailsDto<ComponentBDto>
          }
        />
      );
    }
  } else if (paramA === paramATypes.PRI) {
    if (paramB === paramBTypes.REQUEST) {
      detailedView = (
        <ComponentC
          requestDetails={requestDetails as RequestDetailsDto<ComponentCDto>}
        />
      );
    } else if (paramB === paramBTypes.MODIFICATION) {
      detailedView = (
        <ComponentD
          requestDetails={
            requestDetails as RequestDetailsDto<ComponentDDto>
          }
        />
      );
    } 
  } else if...

这种情况还在继续,因为我们每种都有一些不同的类型,而且是each of them has a specific component that renders its properties in a certain way种.当然,仅仅能够描述情况就有点过于简单化了.

问题是,我可以try 这样做,就像我通常对更简单的值所做的那样:

const dict = {
  [paramATypes.PRE]: {
    [paramBTypes.REQUEST]: <ComponentA
      requestDetails={requestDetails as RequestDetailsDto<ComponentADto>}
    />,
    [paramBTypes.MODIFICATION]: <ComponentB
      requestDetails={
        requestDetails as RequestDetailsDto<ComponentBDto>
      }
    />,
  }, 
  ...
}

然后这样称呼它:

const view = dict[paramA][paramB];

问题

我看到的问题是,使用"如果-地狱"时,只有在满足IF条件时才会处理组件的值.因此,在本例中,它将在每个调用中只计算/处理一个组件.

然而,如果我使用对象/字典范式,它将处理所有的值,因为它需要它来创建稍后要访问的实际对象,所以每次调用这个方法都会计算所有的可能性,只返回其中一个.

如果值只是声明或更简单的值,我不会有任何问题,但作为react 组件我不太确定.

问题是

我对这两种范式的处理方式正确吗?我能做些什么才能有一套更干净的条件?

也许将值定义包装在一个方法中,这样它只在我执行方法的结果时才被处理,就像在const view = dict[paramA][paramB]();中一样?

我只是想知道which would be the best way to put this,所以它不仅是easier to read,而且还有good performance(和代码分析器中的good cognitive complexity).

谢谢!

推荐答案

在我看来,有两种可能的解决方案:

  • 最好的,不总是可行的 标准化要呈现的可能组件的所有props ,并创建这样一个字典
const dict = {
  [paramATypes.PRE]: {
    [paramBTypes.REQUEST]: ComponentA,
    [paramBTypes.MODIFICATION]: ComponentB,
  },
} as const satisfies Record<
  paramATypes,
  Record<paramBTypes, React.FC<{ requestDetails: RequestDetailsDto }>>
>

然后在组件中执行类似以下操作:

const Component = () => {
  const View = dict[paramA][paramB]

  return (
    <div>
      <View requestDetails={requestDetails} />
    </div>
  )
}

}
  • 最灵活,但不是最优的
const Component = () => {
  const dict = {
    [paramATypes.PRE]: {
      [paramBTypes.REQUEST]: () => (
        <ComponentA
          requestDetails={requestDetails as RequestDetailsDto<ComponentADto>}
        />
      ),
      [paramBTypes.MODIFICATION]: () => (
        <ComponentB
          requestDetails={requestDetails as RequestDetailsDto<ComponentBDto>}
        />
      ),
    },
  } as const satisfies Record<paramATypes, Record<paramBTypes, React.FC>>

  const View = dict[paramA][paramB]

  return (
    <div>
      <View />
    </div>
  )
}


在这两种情况下,只呈现正确的组件,而不是所有可能的组件,因此在性能方面是很好的

你应该try 第一个选项,因为它使props 统一,并使一切更易于维护,

Javascript相关问答推荐

Klaro与Angular的集成

Redux工具包查询(RTKQ)端点无效并重新验证多次触发

过滤对象数组并动态将属性放入新数组

node TS:JWT令牌签名以验证客户端和后台问题之间的身份验证

如何在RTK上设置轮询,每24小时

类型脚本中只有字符串或数字键而不是符号键的对象

yarn安装一个本地npm包,以便本地包使用main项目的node_modules(ckeditor-duplicated-modules错误)

Google图表时间轴—更改hAxis文本 colored颜色

成功完成Reducers后不更新状态

如何从URL获取令牌?

正则表达式,允许我匹配除已定义的子字符串之外的所有内容

使用NextJS+MongoDB+Prisma ORM获取无效请求正文,无法发布错误

AJAX POST在控制器中返回空(ASP.NET MVC)

与svg相反;S getPointAtLength(D)-我想要getLengthAtPoint(x,y)

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

如何用javascript更改元素的宽度和高度?

为什么NULL不能在构造函数的.Prototype中工作

在每次重新加载页面时更改指针光标

将Windows XP转换为原始数据以在html前端中显示

我正在为我的单选按钮在HTML中设置一个值.使用Java脚本,我如何才能获得该值?