想要打印对象的键值，但在React中打印数字

Question

想要打印对象的键值，但它打印的是数字。如何在屏幕上打印键值。它打印键值，但也打印数字。

import Link from 'next/link';

export default function Home() {
  const menu = {
    lorem1: "/lorem1",
    ipsum1: {
      dolor2: "/dolor2",
      amet2: "/amet2",
    },
    loremm1: "/loremm1",
    ipsumm1: {
      dolor2: "/dolor2",
      amet2: "/amet2",
    },
  }

  return (
    <>
      <ul>
        {Object.entries(menu).map(([key, value]) => (
          <li key={key}>
            { typeof value === 'string' ? <Link href="/">{key}</Link> : key}
            <ul>
              {Object.entries(value).map(([innerKey, innerValue]) => (
                <li key={innerKey}>
                  <Link href="/">{innerKey}</Link>
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </>
  )
}

Answer 1

您可以在 JSX 中渲染值之前将它们显式转换为字符串。这是修改后的代码：

  return (
    <>
      <ul>
        {Object.entries(menu).map(([key, value]) => (
          <li key={key}>
            { typeof value === 'string' ? <Link href="/">{key}</Link> : key}
            <ul>
              {Object.entries(value).map(([innerKey, innerValue]) => (
                <li key={innerKey}>
                  <Link href="/">{innerKey}</Link>
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </>
  )