С Новым годом! Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
1 / 0 / 1
Регистрация: 05.02.2019
Сообщений: 56

Не рендерятся stateless компоненты

05.12.2019, 17:32. Показов 1667. Ответов 12
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Вот, к примеру, компонент:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import { NavLink } from 'react-router-dom';
 
export const Nav = () => {
  return (
    <ul className='nav'>
      <li>
        <NavLink to='/' exact activeClassName='active' >Home</NavLink>
      </li>
      <li>
        <NavLink to='/battle'>Battle</NavLink>
      </li>
      <li>
        <NavLink to='/popular'>Popular</NavLink>
      </li>
    </ul>
  )
}

Сюда импортирую:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Nav from "./Nav";
import Home from './Home';
import Battle from './Battle';
import Popular from './Popular';
 
 
export default class App extends Component {
  render () {
    return (
      <Router>
        <div className='container'>
          <Nav />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route exact path='/battle' component={Battle} />
              <Route exact path='/popular' component={Popular} />
              <Route render={ () => <p>Page not found</p> } />
          </Switch>
        </div>
      </Router>
    )
  }
}
В итоге выдает кучу ошибок и ничего не работает. Пытался найти что-то в доках, не получилось. (Если писать компонент через es6 класс, то всё гуд)
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
05.12.2019, 17:32
Ответы с готовыми решениями:

Почему рендерятся дубли при асинхронном выполнении mounted()?
Здравствуйте! Почему-то объекты дублируются? БД нормализована. mounted() { fetch(this.$parent.$parent.apiUrl +...

Singleton vs Stateless, Зачем нужны Stateless?
Не понимаю, зачем в EJB нужны Stateless. По-моему, вместо них вполне можно использовать Singleton, без состояния, который, точно так-же,...

Session stateless бины
Всем привет! Подскажите, если бин помечен как session stateless, нам гарантируется, что каждый клиент будет обрабатываться своим...

12
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
05.12.2019, 17:53
Цитата Сообщение от treuh Посмотреть сообщение
Если писать компонент через es6 класс, то всё гуд
treuh, а можете показать?
0
1 / 0 / 1
Регистрация: 05.02.2019
Сообщений: 56
05.12.2019, 18:06  [ТС]
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import { NavLink } from 'react-router-dom';
 
const links = ['Home', 'Battle', 'Popular'];
 
export default class Nav extends React.Component {
  render () {
    return (
      <ul className='nav'>
        {links.map(link => (
          <li>
          <NavLink
          to={link === 'Home' ? '/' : '/' + link.toLowerCase()}
          exact
          activeClassName='active' >{link}</NavLink>
        </li>
        ))}
    </ul>
    )
  }
}
Это показать?
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
05.12.2019, 18:07
treuh, сейчас тоже не увидели разницы? export default
0
1 / 0 / 1
Регистрация: 05.02.2019
Сообщений: 56
05.12.2019, 18:09  [ТС]
shvyrevvg, default для него не нужен. Сам реакт ругаться начинает на него и visual подчёркивает
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
05.12.2019, 18:20
Цитата Сообщение от treuh Посмотреть сообщение
shvyrevvg, default для него не нужен.
Ну если не нужен, то тогда не надо

Добавлено через 4 минуты
А если серьезно. Не задумывались почему в некоторых случаях так импортируют
JavaScript
1
import { NavLink } from 'react-router-dom';
а в других так?
JavaScript
1
import Nav from "./Nav";
0
1 / 0 / 1
Регистрация: 05.02.2019
Сообщений: 56
05.12.2019, 18:26  [ТС]
shvyrevvg,
JavaScript
1
import { NavLink } from 'react-router-dom';
это обычная деструктуризация объекта. Я достал функцию NavLink из этого пакета. Это не реакт, а просто es6

В этом точно не может быть проблемы =)
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
05.12.2019, 18:27
Лучший ответ Сообщение было отмечено treuh как решение

Решение

treuh, ну вот попробуйте вместо
JavaScript
1
import Nav from "./Nav";
JavaScript
1
import {Nav} from "./Nav";
1
1 / 0 / 1
Регистрация: 05.02.2019
Сообщений: 56
05.12.2019, 18:28  [ТС]
Возможно я webpack как то не так настроил. Не могу понять в чём дело
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
05.12.2019, 18:29
Цитата Сообщение от treuh Посмотреть сообщение
Возможно я webpack как то не так настроил. Не могу понять в чём дело
treuh, дело в том, что Вы не знаете как с модулями работать.
0
1 / 0 / 1
Регистрация: 05.02.2019
Сообщений: 56
05.12.2019, 18:33  [ТС]
shvyrevvg, да, проблема была в этом

Добавлено через 1 минуту
shvyrevvg, есть какие-то ссылки на литературу?
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
05.12.2019, 18:36
Цитата Сообщение от treuh Посмотреть сообщение
shvyrevvg, да, проблема была в этом
treuh, внимательней надо быть, ну и ошибки в консоли читать тоже полезно

Добавлено через 2 минуты
Цитата Сообщение от treuh Посмотреть сообщение
shvyrevvg, есть какие-то ссылки на литературу?
Например, вот хороший сайт
1
1 / 0 / 1
Регистрация: 05.02.2019
Сообщений: 56
05.12.2019, 18:39  [ТС]
shvyrevvg, спасибо большое
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
05.12.2019, 18:39
Помогаю со студенческими работами здесь

не рендерятся текстуры
--- closed ---

Удаление stateless session-bean из пула
Hi All Прочитал что удаление stateless session-bean из пула не связано с вызовом remove() home/remote интерфейсов. Цикл жизни таких...

Проверка строки через Stateless Framework. Как реализовать?
Всем привет! Написал программу-модель ДКА с помощью framework stateless, введенная строка после посимвольной проверки должна остаться в...

3D max 2016: рендерятся только контуры объектов
Решил обновиться с макса 9 на макс 16 и сразу возникло несколько проблем. Одна из которых проблема с визуализацией в максе 16 всего что...

Подключенные шрифты рендерятся по разному. Как так?
Всем привет! Такая ситуация. Подключаю в CSS шрифт с гугла вот так @import...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru