Вопросы с меткой [reactjs]
Используйте эту метку для вопросов о React.js — JavaScript библиотеки для создания пользовательских интерфейсов.
6,276
вопросов
0
голосов
0
ответов
4
показа
Редирект неавторизированного пользователя на страницу login?
Главный файл app.js, я хочу проверять является ли пользователь авторизированным.
Но не пойму почему не срабатывает, когда я жму logout, мене не перекидывает на страницу login, хотя логика прописана. ...
-2
голоса
0
ответов
15
показов
Изменение цвета SVG при использований fill="url(#pattern)"
Есть svg которое использует для цвета fill="url(#pattern0)" если в этот fill поставить например red то я получу, просто красный прямоугольник. Обычные svg я прекрасно знаю и умею с ними ...
0
голосов
0
ответов
12
показов
filter работает криво. Вместо удаления объектов заменяет их местами
У меня есть компонент со списками лайкнутых пользователей, при нажатии на кнопку удаления, удаляется конкретный элемент. Но при поторном удалении уже другого объекта все элементы в массиве начинают ...
0
голосов
1
ответ
14
показов
Как передать svg в компонент?
Как передать svg в компонент? Нужно создать компонент в который я буду импортировать разные svg иконки. В компонент будет передаваться иконка и название.
Пример:
const ContextButton = ({icon, name}) =&...
0
голосов
0
ответов
5
показов
Как создать ссылку навигации по разделам?
Приложение написано на react, роутинг через react touter, нужно в шапке страницы сделать элемент навигации:
Некоторые элементы пути должны формироваться динамически, можно просто подставлять, можно ...
0
голосов
0
ответов
15
показов
Как сохранить созданный мной JSON файл в react typescript в localStorage в браузере?
[
{
"id": 1,
"url": "../src/components/images/aos.svg",
"name": "AOS",
"size": "450ml",
...
0
голосов
0
ответов
6
показов
Как использовать css modules и gsap? В реакт
Как использовать Css modules и gsap?
Если делаю так:
useEffect(()=> {
gsap.from(styles.banner__info__uptitle, 0.3, {
y: 100,
opacity: 0,
delay: 0.1,
})
},[])
то не работает
если в ...
0
голосов
0
ответов
8
показов
Можно ли использовать методы для работы с DOM в React?
возможно банальный вопрос, но чёткого ответа на него я так и не нашёл. Могу ли я использовать методы для работы с DOM (конкретно методы для работы с classList) внутри React? Просто я слышал, что это ...
0
голосов
1
ответ
15
показов
Each child in a list should have a unique "key" prop
Есть компонент, который мапит массив и возвращает другой компонент. Проблема в том, что если я компонент изменяю на div, то все работает нормально, но если оставляю компонент, то выдает ошибку:
...
0
голосов
0
ответов
12
показов
React + Node не могу корректно деплоить
Здраствуйте, мы деплоили проект но он работает не корректно, проблема в том что когда мы заходим в сайт с компьютера который подключен с ssh к серверу node все работает, а если заходим с другого Ip ...
0
голосов
1
ответ
16
показов
Изменение псевдокласса при нажатии на кнопку (React)
Как изменить значение color для псевдокласса hover при нажатии на кнопку, чтобы после нажатия цвет при следующем наведении был другой?
CSS - код:
.r:hover {
color: red;
}
JSX-код:
import React from ...
0
голосов
0
ответов
14
показов
Как перенести приложение с React на React-native
Необходимо перенести приложение на react-native , но я не нашел подробной информации как заменить html элементы на react-native
Файл index.js на react
export const Game: React.FC = ({}: any) => {
...
0
голосов
0
ответов
13
показов
Как работает onSelect в react bootstrap 5 в карусели?
Не совсем понятно, как использовать onSelect.
Всё, что есть в документации:
onSelect function controls activeIndex
Callback fired when the active item changes.
(eventKey: number, event: Object | ...
0
голосов
0
ответов
7
показов
как вытащить активный айтем карусели в бутстрап 5 react
Есть карусель взятая из бутстрапа, на ней есть три айтема, переключаем только вручную, подскажите, пожалуйста, как можно получить значение активного айтема, как без нажатия на айтем можно получать ...
0
голосов
0
ответов
9
показов
Не изменяется состояние в компоненте, но изменяется в store, mobx. Приложение обвернуто в strict mode
Есть стор с категорией, которая просто изменяется селектом. Состояние в сторе изменяется, но не прилетает в компонент.
store:
import {makeAutoObservable} from 'mobx'
class Categories{
category: ...
0
голосов
1
ответ
14
показов
Next.js выдаёт ошибку при попытке напрямую перейти на страницу localhost:3000/admin/login
Я сейчас занимаюсь небольшим проектом, у которого есть админка со страницей логина, и при переходе на неё через другие страницы всё ок, но если прямо в поисковой строке вбить адрес localhost:3000/...
0
голосов
0
ответов
7
показов
Redux как получить/передать action.payload.id при клике из другого компонента
Вот есть слайс
const checkboxAdversSlice = createSlice({
name: "checkbox",
initialState: {
mainCheckbox: false,
subCheckboxes: [],
allCheckboxes: false
},
...
0
голосов
1
ответ
36
показов
css: плавное "выдвигание" созданного блока
подскажите, можно ли как-то реализовать плавное "выдвигание" <div /> блока (т.е. появление с 0 высоты до исходной высоты под каким-то другим блоком), если блок не присутствует ...
1
голос
1
ответ
17
показов
react: как в функциональном компоненте понять, что было изменено значение атрибута
есть функциональный компонент React Header:
const Header = (props) => {
[value, setValue] = useState(() => {
console.log('создание компонента');
return props.attr;
});
...
0
голосов
0
ответов
29
показов
Как забрать данные с запроса?
У меня задача забрать это сообщение и сравнить, если оно выходит, то тогда не пропускать работу, но я не понимаю как забрать этот объект отсюда, я сразу извиняюсь я не знаю, какой код нужно вставить, ...
0
голосов
0
ответов
18
показов
Как сделать перелистывание музыки, с помощью useSound
У меня есть текущий трек, и при каждом нажатии я меняю его на следующий, но при этом предыдущий продолжает играть.
function importAll(r) {
return r.keys().map(r);
}
const music = ...
0
голосов
0
ответов
11
показов
Нормально ли субимируется SEO оптимизация и мето-теги с реактом? [закрыт]
Нормально ли субимируется SEO оптимизация и мето-теги с реактом?
А так же можете подсказать разницу скорости загрузки между обычным шаблонным сайтом, и сайтом на реакт?
0
голосов
0
ответов
10
показов
не работает кнопка удаления загруженной фотографии React
пожалуйста, помогите разобраться, почему не работает кнопка удаления загруженной фотографии?
removeAvatar = (id, avatarType) => () => {
const { dispatch, token } = this.props;
...
0
голосов
0
ответов
29
показов
Настройка Nginx для react Не могу получить доступ к сайту
Помогите коректно задиплоить приложение на удаленный сервер.
У меня на компьютере windows. на Сервере Centos. Поставил на сервер nginx. Домена у сайта пока нет, но даже с ssl ключом (генерировал сам) ...
1
голос
1
ответ
30
показов
react: почему не изменяются состояния компонента
Есть компонент со таймером обратного отсчёта от Ant Design (Statistic.Countdown).
Хотя, чтоб в зависимости от того сколько времени осталось до 0 он отрисовывался в разных стилях.
Делаю следующий код:
...
0
голосов
0
ответов
8
показов
Можно ли выводить данные из базы данных MySQL в @mui/x-data-grid? При запуске приложения появляется пустая страница
import { DataGrid } from '@mui/x-data-grid';
import { useEffect, useState } from 'react';
import mysql from 'mysql2';
function getCurators() {
const connection = mysql.createConnection({
host: '...
0
голосов
0
ответов
18
показов
Почему просвечивается модель *.glb React Three js?
<Canvas camera={{fov: 90,position: [0,0, 4500],far: 0}}>
<Suspense fallback={null}>
<ambientLight intensity={0.5}/>
<directionalLight intensity={1} decay={2} position={[0.7, 3.05, ...
1
голос
1
ответ
31
показ
Как развернуть react приложение на сервере linux?
Есть сайт на react, который нужно перенести на сервер. Запустил у себя на компьютере
npm run build
npm install serve -s
serve build -s
На local-ip:3000 запустился сайт. Теперь переношу на удаленный ...
-1
голос
0
ответов
24
показа
вопрос такой как отключить cors и связать node js + react js
Как отключить cors и связать node js + react js
Знаю что можно вот так избежать cors иCORS и для отключение CORSотключения CORS я использовал:
app.use(function(req, res, next)
{
res.setHeader('...
0
голосов
1
ответ
11
показов
Как при скролле окна добавить кнопке класс active? React Js
Есть страница с кнопкой <button className ="totopbtn">
Как при скролле добавить ей класс active?
Пробовал так:
export default function Home() {
const [scroll, setScroll] = ...
0
голосов
1
ответ
12
показов
Подключение yandex map в react проекте
Не совсем понимаю как подключать API yandex map к react, в документации https://yandex.ru/dev/maps/jsapi/doc/3.0/quick-start/index.html#load-api указано что через html это надо делать, но как же ...
0
голосов
1
ответ
11
показов
При создании образа docker выскакивает ошибка, что я пытаюсь скопировать несуществующую директорию
Есть простое приложение на React(Nextjs) и вот такой файл Dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm i
COPY . .
RUN npm run build
FROM nginx AS server
COPY --...
-1
голос
1
ответ
16
показов
Возникла проблема при попытке обновить счетчик на сервере через axios redux
Есть функция с условием, при котором товар добавляется в корзину. Если продукт уже был добавлен, то увеличьте его count++. В консоли браузера возникает ошибка, необнаруженная ошибка типа: невозможно ...
0
голосов
0
ответов
22
показа
Помогите исправить проблему с определением вершин при рисовании на Canvas
Моя задача от руки нарисовать некий график, а затем определить где были самые высшие точки и самые нижние. Все работает, но если рисовать очень медленно, если же рисовать быстро, то определяется не ...
0
голосов
0
ответов
8
показов
как в Redux Toolkit инициализировать какие то начальные и глобальные переменные
например как это написать с использованием Redux Toolkit.
кратко идет начальная инициализация переменных каторые нужны во всем проекте
import { createContext, FC, ReactNode, useContext, useEffect, ...
0
голосов
0
ответов
8
показов
Uncaught DOMException: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found
Первый раз работаю с indexedDB, не могу понять в чем проблема, помогите пожалуйста. Вот код:
import React from "react";
function App() {
const indexedDB = window.indexedDB;
if (!window....
0
голосов
0
ответов
19
показов
Push перезаписывает значения (объекты) в массиве, а не добавляет новые
У меня есть 2 useEffect и 2 массива, когда я нажимаю на кнопку туда должно пушится значение, и автоматически сохранять в локал сторедж, когда я кликаю, добавляется объект в массив, но при повторном ...
0
голосов
0
ответов
16
показов
401 ошибка после 204 входа laravel react axios
Посчитал что кода очень много выкидывать сюда не логично поэтому залил в гитхаб
По умолчанию порт сервера api 80, можно изменить на свой в env реакта react/env
https://github.com/DenisGimranov/...
0
голосов
0
ответов
11
показов
Как запретить перерисовку компонента при использовании внутри него глобального состояния из Redux
На странице есть 3 компонента: Header, Sidebar и UserTable.
В компоненте Header есть кнопка открытия/закрытия сайдбара (на картинки кнопка рядом с логотипом). При нажатии на кнопку она вернёт true или ...
1
голос
0
ответов
15
показов
react: сохранение состояний при функциональном программировании
ситуация следующая (как я ее понимаю):
при определении функционального компонента (чтоб не захламлять специально его максимально вычистил)
export interface IProps {
title : string,
timer ...
0
голосов
1
ответ
27
показов
как поменять порядок фото в галерее при их загрузке React
на данный момент я загружаю фотки на страницу и они становятся по порядку: загрузила первой, загрузила второй, загрузила третьей итд, а мне нужно, чтобы та фотка, которую я только что загрузила - ...
0
голосов
1
ответ
9
показов
Нужно чтобы по клику на кнопку выводило данные с инпута в консоль , но почему то они выводятся каждый раз при изменении инпута
function Text() {
const [text, setText] = useState("");
return (
<div className="white">
<input type="text" placeholder="enter" onChange={...
2
голоса
0
ответов
11
показов
Как сделать скролл вертикальный в TextField material ui?
Как сделать скролл вертикальный в TextField material ui?
Хочу добавить скролл вертикальный в TextField, видела решение, что можно заменить его на select, и через menuProps, добавить, но данное решение ...
0
голосов
1
ответ
18
показов
Как менять тип относительно входящих данных? typescript
В функцию onChange приходит переменная dates зависящая от атрибута selectsRange (reactDatePicker). Если selectsRange === true в dates приходит массив с 2-мя Date, а без просто Date.
type ...
0
голосов
0
ответов
32
показа
Создание кастомных стрелок с react-xarrows
Коллеги! Подскажите, пожалуйста, кто пользовался библиотекой react-xarrows: в моем проекте таблицы диаграммы соединены стрелками. Пользователи хотели бы сами настраивать длину и изгибы стрелок, чтобы ...
0
голосов
0
ответов
17
показов
Получение данных из хука useAsyncValue
Прочитал в документации react-router-dom про возможность использования предзагрузки данных через загрузчик. Там указано что можно использовать хук. Попробовал, потестил с одним объектом данных, всё ...
0
голосов
1
ответ
31
показ
Передача данных из функции в div (React)
При нажатии на кнопку не отображается на экране значение переменной p1. Код на Typescript.
//компонент Main
export function Main() {
//переменные
let p1;
let p2: any = "1";
let a = ...
0
голосов
0
ответов
11
показов
Не работает модальное окно в React Native TypeScript
Я пытаюсь через useState передать значение из одного файла, где находится кнопка и функция, в другой файл в котором само модальное окно находится. Я явно что то делаю не так, вот код:
Первый файл с ...
0
голосов
1
ответ
15
показов
Задача вывести Теги из объекта React JS
Есть файл Wall.js
import React from 'react'
import Post from '../Post/Post';
function Wall() {
const posts = [
{
id:2,
author: {
id: 1,
...
0
голосов
1
ответ
18
показов
Как исправить ошибку Function components cannot be given refs?
Есть форма, которую я хочу провалидировать при помощи react hook form. Есть компонент инпута:
import React from 'react';
import styles from '../../styles/Input.module.scss'
const Input = (props) =>...