时间戳

首页 > 解决方案 > 简单的反应功能组件不生成 HTML

reactjs - 简单的反应功能组件不生成 HTML

问题描述

我试图找出创建生成简单 html 的功能组件的最佳方法 - 以这个 nav-links.js 文件为例：

export const navLinks = [
  {
    name: "home",
    href: "/"
  },
  {
    name: "subs",
    href: "/subs"
  }
];

我的组件尝试生成的 html 仅循环遍历每个链接，以生成带有列表标签和内部标签的无序列表。

问题出现在这个 nav-menu.js 文件中，其中的输出只是两个<ul></ul>标签，里面什么都没有：

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import {navLinks} from "../util/nav-links";

export const NavMenu = () => {
  const lis = () => (
    {navLinks}.map(link => {
      return (
        <li>
          <Link to={link.href} key={link.href}>{link.name}</Link>
        </li>
      )
    })
  )

  return (
    <div id="navbar">
        <ul>
          {lis}
        </ul>
      </div>
  )
}

为什么在上面的组件中没有渲染？我在下面写了更多代码来解决它，尽管我想知道它是否可以更好地重构：

export const NavMenu = () => {
    return (
      <div id="navbar">
          <ul>
            {navLinks.map(link => {
              return (
                <li>
                  <Link to={link.href} key={link.href}>{link.name}</Link>
                </li>
              )
            })}
          </ul>
        </div>
    )
  }

为什么第一次尝试不起作用，如何更好地重构？感谢您的帮助

标签： reactjs

解决方案

在您的第一个示例中不起作用，因为您const list = () => {..}在代码的 JSX 部分的花括号内将其作为匿名函数传递而没有调用它。

如果你这样称呼它{list()}：

return (
    <div id="navbar">
        <ul>
          {lis()}
        </ul>
    </div>
)

这样可能会奏效。

或者您可以将列表存储在这样的变量中：

const lis = navLinks.map(link => {
      return (
        <li>
          <Link to={link.href} key={link.href}>{link.name}</Link>
        </li>
      )
    }
)

或者也像这样：

const lis = navLinks.map(link => (
        <li>
          <Link to={link.href} key={link.href}>{link.name}</Link>
        </li>
      )
    )
)

推荐阅读