Блог

Главная - Вопросы по программированию - Простой функциональный компонент react, не генерирующий HTML

Простой функциональный компонент react, не генерирующий HTML

#reactjs

#reactjs

Вопрос:

Я пытаюсь выяснить наилучшие способы создания функциональных компонентов, которые генерируют простой 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>
    )
  }

Почему первая попытка не сработала, и как ее можно было бы лучше переработать? Спасибо за любую помощь здесь

Комментарии:

1. Что произойдет, если вместо того, чтобы {lis} использовать {lis()} или переименовать его в Lis (заглавная буква) и попробовать <Lis /> ?

2. Это не сработало с первого раза, потому что вы пытались использовать Array.prototype.map() on Object (поскольку вы разрушили свой navLInks массив в navLinks переменную, когда вы это сделали import {navLinks} from "../util/nav-links" , а затем создали объект, {navLinks: [{name: 'home', href: '/'},{name: 'subs', href: '/subs'}]} когда вы заключили navLinks в фигурные скобки). Итак, ваша первая попытка, скорее всего, выдала ошибку. Он будет работать так, как ожидалось, если вы пропустите фигурные скобки: navLInks.map(.. . Хотя я бы предпочел второй подход.

Ответ №1:

В вашем первом примере не сработало, потому что вы передали 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>
      )
    )
)