next.js 想要打印Object的键值,但它在React中打印数字[关闭]

oknwwptz  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(118)

已关闭,此问题需要details or clarity。它目前不接受回答。
**想改善这个问题吗?**通过editing this post添加详细信息并澄清问题。

9天前关闭
Improve this 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>
    </>
  )
}
ntjbwcob

ntjbwcob1#

你可以在渲染时将键和值 Package 在span或div元素中,这样React就可以将它们视为单个子元素。下面是修改后的代码:

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

相关问题