打字稿反应 - 迭代道具对象

Question

当使用打字稿时，如何通过React（或SolidJ）组件中的对象循环html？是否有正确的语法，或者需要工作？

export default function MyComponent(props: any) {
       
    return (
        <>
            {Object.values(props.someObject).map(value => {
                <div>{value.name}</div>       {/* Error: Object is of type 'unknown'. */}
            })}
        </>

    )
}

我正在关注本上下文的SolidJs教程： https://youtu.be/wsvmeg.be/wsvmeg7hpye 特别是ID喜欢使用＆lt; for＆gt;循环组件内置在solidjs中，我认为这只是地图的速记语法。

<For each={props.someObject}>
{value =>
    <div>{value.name}</div>       {/* Error: Object is of type 'unknown'. */}
}
</For>

Answer 1

这样的简单函数对于获取具有正确类型的道具条目很有用：

const propsEntries = <T extends Record<string, unknown>>(props: T) =>
  Object.entries(props) as [keyof T, T[keyof T]][];

然后，它可以使用＆lt; for＆gt;组件来映射道具：

<For each={propsEntries(props)}>
   {([name, value]) => <li>{name}: {value}</li>}
</For>

in游乐场

Answer 2

在React + TypeScript中，您需要以以下方式进行。

type MyComponentProps = {
 someObject: object
}

export default function MyComponent(props: MyComponentProps) {
       
    return (
        <>
            {Object.values(props.someObject).map(value => {
                <div>{value}</div> 
            })}
        </>

    )
}