Вопросы с меткой [jsx]

Руководство по использованию метки отсутствует.

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
29 показов

Как лишний раз не рендерить интерфейс в react

Начал изучать react и дошел до получения данных из дб, и столкнулся с не понятием как правильно это реализовать, я захотел сделать hooks который бы принимал ссылку обрабатывал и отдавал ответ, в ...
Edvard's user avatar
  • 69
0 голосов
0 ответов
26 показов

Быстрое создание div с классом

Начала учить react, столкнулась с тем что в JSX не могу быстро создавать классы для кнопок и дивов как в обычном css и html при верстке, т.е. например div.className + tab не работает - только ...
CloudyTails's user avatar
0 голосов
2 ответа
34 показа

Почему не конкатенируются строки в тернарном выражении?

Не получается конкатенировать строки в тернарном выражении. Если active true, то он просто занимает всё строку и не добавляет "list_item" Хотя при проверке это всё строки, не понимаю почему ...
Grosta's user avatar
  • 1
0 голосов
2 ответа
35 показов

Как изменить отступ от края input для вводимого текста?

Текст расположен слишком близко к краю input, как можно его отдалить от него вправо? JSX: <form> <label htmlFor="email"></label> <input type="...
Dream's user avatar
  • 61
1 голос
0 ответов
40 показов

Проблема с анимацией печати текста для первой надписи

Всем привет, я сделал анимацию печати слоганов и чередование их, но заметил проблему, что как только страница загрузилась или перезагрузилась, первый слоган не печатается, а просто появляется, далее ...
Dream's user avatar
  • 61
0 голосов
1 ответ
46 показов

Передача картинок в компонент через пропсы в React.js

Я только-только начинаю изучать React.js и его подходы как таковые, поэтому если кто-то посчитает вопрос глупым и прочее - не судите строго. Я верстаю сайт, где на главной странице у меня отображается ...
pslncv's user avatar
  • 43
0 голосов
0 ответов
17 показов

Какой подход выбрать в css?

У меня есть в jsx-файле элементы, которые мне необходимо стилизовать в css. Вопрос: мне нужно сразу в css объявить эти элементы, задать им размеры и позиции на своем мониторе и только потом приступать ...
Dream's user avatar
  • 61
0 голосов
0 ответов
66 показов

Как адаптировать в CSS так же?

На странице регистрации Facebook https://ru-ru.facebook.com/ я заметил, что под кнопками и полями ввода имеется белый квадрат. Когда я изменяю разрешение экрана через DevTools, этот квадрат и все ...
Dream's user avatar
  • 61
0 голосов
0 ответов
21 показ

React, в чем разница <div> и <>?

Можете объяснить, в чем разница в React двух записей? return ( <div> <h1>Hello</h1> <div/> ); return ( <> <h1>Hello</h1> </&...
erslevin's user avatar
0 голосов
1 ответ
32 показа

Как указать правильный путь к файлу

Как правильно указать путь в App.js (реакт) к файлу, который находится по пути D:\Test\frontend\chat-app\src\components\Chat\jsx\ChatLogic.jsx, если в терминале я нахожусь в директории D:\Test\...
Dream's user avatar
  • 61
0 голосов
1 ответ
227 показов

Не работает Tailwind в REACT

Создал реакт приложение, подключил tailwind по инструкции https://tailwindcss.ru/docs/installation/ , пишу стили в className, но никаких изменений на странице нет. Перепробовал все что пишут в ...
birnares's user avatar
0 голосов
0 ответов
34 показа

Скопировать svg с анимацией с сайта

Пытаюсь скопировать svg с анимацией с сайта nextjs.org: но ничего не выходит: Пробовал стырить целиком сайт, но там jsx сбилженный и тоже не могу разобраться как это в нормальный jsx законвертить, ...
Andrey Grek's user avatar
0 голосов
0 ответов
24 показа

Как получать значения только отображаемых input?

Столкнулась с такой проблемой: У меня есть форма, которая содержит вложенный список (тип товаров), который в свою очередь инициирует появление блока параметров. Для каждого типа товара определенные ...
Filavandrel's user avatar
0 голосов
0 ответов
40 показов

Использование спецсимволов html в jsx

Заполняю графу погоды в приложении. Данные приходят с api, соответственно, пишу конструкцию на случай, если данные не придут. Проблема в том, что значок градуса поставлен спецсимволом, а нужно, чтобы ...
BadGod's user avatar
  • 1
0 голосов
0 ответов
10 показов

Есть ли плагин на подобии emmet, но для .jsx файлов в vscode

Есть ли в vscode плагин который бы ускорял написание html разметки в jsx файлах, как это реализовано в emmet, то есть ставишь точку и автоматически предлагает вставить div, но чтобы это работа в ...
user avatar
0 голосов
0 ответов
18 показов

Prettier - React Native

Prettier автоматически вставляет {' '} в мой JSX код, что вызывает проблему в моём EXPO компиляторе, которая говорит что string значения могут находиться только внутри тега , что нужно добавить в ...
pigeonych's user avatar
0 голосов
1 ответ
33 показа

При обращении к полю получаю undefined

Использую реакт и редакс. Есть 2 файла: bookContainer и bookReducer. Содержимое bookContainer import React from 'react' import { borrow_book } from '../redux_library/bookActions' import { connect } ...
Danya P's user avatar
0 голосов
0 ответов
13 показов

не знаю как правильно прописать function* getAllPostsWorker

застряла на таком моменте не знаю как правильно прописать в saga функцию worker, чтобы получить посты const API = create({ baseURL: "https://api.spaceflightnewsapi.net", }); const ...
Ника Волкова's user avatar
0 голосов
0 ответов
35 показов

Не могу загрузить картинки через Webpack 5 после перехода с 4 Подскажите

сам конфиг и зависимости ошибка просто 404, подключаю картинки в jsx через src раньше все работало src="../../../../../img/logo_white.webp" "@babel/cli": "^7.7.5", ...
Neo Neo's user avatar
  • 13
0 голосов
0 ответов
51 показ

целесообразность useReducer в компоненте

Решил поковырять useReducer, хотелось бы узнать, имеет ли место в моём компоненте хук useReducer, или же можно было обойтись обычным стейтом? Также, так как проект на TS, прошу указать на ошибки, ...
Spenkau's user avatar
  • 48
0 голосов
1 ответ
29 показов

jsx файл не видит разметку

При сборке проекта возникла проблема, не дает в файле jsx разметку сделать. Не знаю, как решить, гуглила, но без особого результата. Пробовала отключать eslint, думала, в нем проблема, но не помогло. ...
Anastasia's user avatar
0 голосов
1 ответ
42 показа

Не могу передать значение из дочернего компонента в родительский

Сейчас я пытаюсь добиться следующего поведения: при выборе определенного человека, что бы он добавлялся в состояние selectedMentor. Сейчас selectedMentor хранит null. Часть кода родительского ...
Anton Buketov's user avatar
0 голосов
1 ответ
30 показов

Как сделать открывающуюся менюшку по заданному шаблону?

Делаю пэт-проект и столкнулся с проблемой на фронтэнде. Решил сделать текстовый редактор, в котором контент разбивается на блоки (заголовки, параграфы и т.д.), у каждого блока рядом есть кнопка, по ...
Pahan's user avatar
  • 43
0 голосов
1 ответ
37 показов

Как сделать компонент, который может включать дочерние tsx (SOLID framework)

Сама ошибка: У типа "{ children: (string | Element)[]; }" нет общих свойств с типом "IntrinsicAttributes". Сам код .tsx : import { type } from 'os' import type { Component } from ...
Pahan's user avatar
  • 43
0 голосов
0 ответов
16 показов

React.js Приложение падает при переходе на другие страницы [дубликат]

При переходе на другие страницы, приложение падает, а в консоль выдается это: Код: const search = async (inputs, radio, location) => { const requestOptions = { ...
GnidaPIvnov's user avatar
1 голос
1 ответ
136 показов

Как реализовать табы в Реакте, не используя хуки

Создал табы на чистом CSS: https://codepen.io/syberian/pen/RwBBqGq - и эти табы отлично работают в песочнице. HTML <div class='match-outcome'> <ul class='tabs'> <li class='tab'&...
TupoScrip's user avatar
0 голосов
0 ответов
45 показов

Почему роуты не работают?

Написал роуты вручную по видео и все работает, хочу теперь сделать их через функцию map, но не получается. В видео используется react-router 5. Я использую react-router 6. В браузере ошибка No routes ...
Vanya's user avatar
  • 13
0 голосов
0 ответов
178 показов

Как подружить prettier и eslint при использовании табов, и пробелов для выравнивания

В строке 27 преттиер ставит два таба для выравнивания Кусок кода из компонента Реакт jsx: Нужно сделать так, чтобы eslint не ругался и не подсвечивал. Текст ошибки: - Line 27:2: Mixed spaces and ...
Роман Василаки's user avatar
0 голосов
0 ответов
52 показа

что включается при автозаполнении и как избавится от этого

пытаюсь разобратся что срабатывает при автозаполнении и как это убрать, не получается, появляется какая то серая полоска и выдиление. после нажатия enter появляется еще одна полоска возле закрывающей ...
Armen's user avatar
  • 1,587
1 голос
1 ответ
90 показов

Не отрабатывает первый рендер

Есть страница с пиццами и панель с сортировками пицц Центральная сортировка пока не нужна, только левая и правая. Сортировки работают отлично, но есть одно но. Вторая сортировка (популярность, цена...)...
Spenkau's user avatar
  • 48
0 голосов
0 ответов
21 показ

Рендер совокупности стейтов

Первый раз делаю мини-проект на реакте - сайт с пиццей, столкнулся с такой проблемой: У меня есть несколько видов сортировок, на каждую сортировку свой стейт. Чтобы отрендерить на странице карточки с ...
Spenkau's user avatar
  • 48
0 голосов
0 ответов
105 показов

Сохранить состояние табов в React

Помогите пожалуйста сохранить состояние табов, нужно чтобы при переключении сохранялись действия пользователя, я пока не придумал как это сделать import React, { useState } from 'react'; import ...
Oleg Pershun's user avatar
0 голосов
0 ответов
55 показов

Как реализовать корзину, покупок?

Голову уже раз 5 сломал, как реализовать корзину в подобном коде? App.js: import logo from './logo.svg'; import './App.css'; import { Container } from '@mui/material'; import { Routes, Route } from '...
Pasha Pofactu's user avatar
0 голосов
2 ответа
136 показов

Как избавиться от дублирования компонента в React

Недавно начал изучать React, появился вопрос про повторяемые компоненты на странице, у которых отличаются только пропсы. Есть файл App.js, в нём блок menu, куда я пихаю компоненты: <div ...
Spenkau's user avatar
  • 48
0 голосов
0 ответов
36 показов

При запросе Key ID в React выдает Undefined

При добавлении товара не отображается его ID в консоли App.js if (cartItems.find((item) => Number(item.id) === Number(obj.id))) { axios.delete(`/cart/${obj.id}`); setCartItems((prev)...
Yehor's user avatar
  • 1
0 голосов
1 ответ
400 показов

react: преобразовать текст в html код

подскажите, как можно преобразовать текст внутри которого также указываются html теги в html код если более точно, то у меня есть строка, которая содержит html код: this.state = { text: 'test <...
Zhihar's user avatar
  • 37.1k
0 голосов
1 ответ
205 показов

Модальное окно обрезается сверху при уменьшении высоты экрана (React Js)

Есть модальное окно на react js. При уменьшении высоты экрана, обрезается верхняя часть модального окна, при этом скролл работает вниз и показывает часть которая не влезла, но верхнюю часть ...
Павел's user avatar
0 голосов
1 ответ
243 показа

Записать React компонент в переменную и использовать "как тэг"

Эта нерабочая конструкция нужна для оптимизации. page - номер активной вкладки. Я хочу, чтобы в зависимости от активной по номеру страницы подкидывался active={true} в компонент. Пример: page == 0 =&...
XpomIX's user avatar
  • 3
0 голосов
1 ответ
111 показов

Подключение API с JavaScript на react-app

У меня есть проект на create-react-app. Есть несколько страниц которые находятся в папке /src/components/. На странице Donate.jsx нужно использовать API(виджет) от trademc(хочу сделать донат для ...
Soupborsh's user avatar
0 голосов
0 ответов
396 показов

Перерисовка компонента при нажатии на элемент li

Подскажите, пожалуйста, как перерисовать имеющийся компонент на react jsx при нажатии на элемент li. Имеется компонент Content. Он отрисовывает список с карточками треков: export default function ...
Kristina Zhukova's user avatar
0 голосов
2 ответа
258 показов

ReactJS. Конкатенация элементов JSX

Есть два элемента: elem1 = <div>1</div>; elem2 = <div>2</div>; Существует ли способ их конкатенировать в другую переменную newElem, чтобы при ReactDOM.render(newElem, ...) ...
Serolapy's user avatar
0 голосов
1 ответ
89 показов

Тэг script не работает в JSX-React, только в html

Есть виджет рейтинга tophotels, нужно отобразить его в react-компоненте на странице, JSX ругается на него, при использовании пакета (react-helmet), так же ничего не происходит. В html-структуре ...
Andrey's user avatar
  • 1
0 голосов
0 ответов
35 показов

Написал код. Но ничего не получается, выходит ошибка: Unexpected token '<'

<script> // Данные, массив объектов Recipes const data = [ { name:"Baked Salmon", ...
андрей геворкян's user avatar
0 голосов
1 ответ
89 показов

Как проверить, что переменная false в jsx

изучаю React и не совсем понимаю синтаксис JSX. Есть переменная const [loading, setLoadong] = useState(false); Пытаюсь в jsx проверить, что она является false { loading ?? null( <p>false&...
Vivian's user avatar
  • 191
0 голосов
2 ответа
46 показов

JS. React. JSX проблемы

Всем привет! Имеем 3 файла: App.js; post-list.js; post-list-item. В файле post-list-item я прописал переменную PostListItem. В файле post-list.js я создал переменную PostList и вложил список из ...
Vladislav4488's user avatar
0 голосов
0 ответов
103 показа

Элементы JSX не могут иметь несколько атрибутов с одним именем. React

Почему когда я указываю тегу input атрибут name в React, выдает эту ш [{ "resource": "/src/app/components/thumbnails/ThumbnailListItem/index.js", "owner": "...
Wells's user avatar
  • 65
0 голосов
0 ответов
12 показов

React JSX В чём отличие "class name" от "cost name" по своему предназначению? [дубликат]

Изучаю React. Например, что такое class в верстке-html, понимаю. Но что такое class в React js не пойму. В чем разница между class name extends Component { render() { return ( ... ) }} и const name = (...
Tryd0g0lik's user avatar
1 голос
1 ответ
244 показа

вызов обработчика событий из одного компонента в другом компоненте

есть компонент function App() { const handleClick= () => { const popupOpen = document.querySelector('.popup'); popupOpen.classList.add('popup_open') }; return ( <> &...
WestVell's user avatar
-1 голос
2 ответа
334 показа

Как в React заставить код над return() выполняться после того, как исполнится код внутри return()?

Нужно, чтобы код над return() выполнялся после того, как будет отрисовано DOM-дерево, описанное внутри return(). Вот пример кода, где DOM отрисовывается позже, что приводит к ошибкам как раз по той ...
SoftHardcore's user avatar
1 голос
2 ответа
164 показа

Как передать контекст при вызове функции через onClick?

Необходимо, чтобы при клике на "DOM-элемент" блок <p>Hello!</p> внутри него менялся на <p>Goodbye!</p>. Для этого был написан следующий реакт компонент: import React ...
SoftHardcore's user avatar