繁体   English   中英

Typescript React/Next 通过具有联合类型属性的键映射 object

Typescript React/Next mapping an object via keys with union type properties

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我是 TS 新手,在使用联合类型字符串或数组映射 Object 时无法解决 Typespript 错误。 我的方法中的 JS 工作正常,但是在映射字体大小时出现 Typescript 错误。 错误提示字符串上不存在 map。 我知道这意味着什么,但我不知道如何解决它。 我想知道是否有人可以帮助我。

const fontSizes = {
  xs: '16px',
  md: ['16px', '24px'],
  lg: ['16px', '24px', '32px']
}

 const Typography: NextPage = () => {
  return (
    <>
      {Object.keys(fontSizes).map((k, i) => {
        return (
          <>
            <h2 key={i}>{k}</h2>
            {typeof fontSizes[k as keyof typeof fontSizes] === 'string' &&
              sizes[k as keyof typeof sizes].fontSize}

            {typeof fontSizes[k as keyof typeof fontSizes] === 'object' &&
              sizes[k as keyof typeof sizes].fontSize.map((k, i) => {
                return <span key={i}>{k}</span>
              })}
          </>
        )
      })}
    </>
  )
}
问题暂未有回复.您可以查看右边的相关问题.
4 在React中映射对象键并返回子属性

我有一个映射对象数量的报告。 在我的示例中,有3个对象数组。 我想在每个对象映射时获取其中一个属性的值。 这是我的代码片段,用于返回报告: 它将输出的const result映射为: 上面有3个报告-GK,FB和FW 我现在想进入每个报告并获得价值。 让我们看一 ...

6 Typescript:object 键的联合类型不能用作此 object 的键

我有一个用一个参数调用的 function。 这个参数是 object。 此 function 正在返回另一个 object,其中一个属性是传递给 function ZA8CFDE633194C668F 的值。 当我尝试使用 obj[key] 表示法检索 object 的值时遇到问题。 我确实理解, ...

8 React Typescript 联合式

我创建了一个 Card 组件,它有两个变体:Wrapper 和 Dashboard。 每个变体都有不同的道具 现在,当我尝试在组件中使用Props作为类型时,我得到: 唯一看起来不错的键是变体,我猜是因为它是两种类型中唯一的通用键。 卡片.tsx 最好的方法是什么? ...

10 具有联合类型键但具有非统一值类型的打字稿对象

TLDR,我想做的是创建一个(对象)类型,其中键类型与文字联合类型匹配,但值类型都不同。 考虑以下场景。 我们有一组 if PluginId (字符串文字类型的联合)。 每一个都代表一个插件(插件是什么无关紧要)。 我想创建一个对象类型,其中的键匹配这个字符串文字的联合,并且值是给定插件的唯一类 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM