5
голосов
Как использовать window.onload в React?
https://ru.reactjs.org/docs/hooks-effect.html
Вам нужен хук UseEffect. Он отслеживает перерендеринг компонента и вызывает функцию, которая выполняется, когда компонент рендерится. Если у этой функции ...
5
голосов
Принятый
Что такое node.js, react.js и тд?
Так-с, начнём.
Node.js - javascript фреймворк, работающий на стороне Вашего ПК(что-то типа python с синтаксисом js). Для фронтенда используется как автоматический сборщик для других фреймворков(vue.js,...
4
голоса
React hook useState. Каким образом можно навесить хук на неизвестное количество элементов, при использовании map
При использовании map необходимо возвращать компонент, а внутри этого компонента можно создать любое количество хуков. Примерно так:
// import React from "react";
const data = [
{ id: 1, title: ...
4
голоса
TypeScript. Не получается присвоить тип переменной
В ошибке указан тип, который имеет присваиваемое значение
(data: any) => void
именно его и надо было указывать для переменной:
const onSubmit: (data: any) => void = ...
Сейчас же идет ...
4
голоса
Принятый
Передача объектов в функции JavaScirpt
Действительно, здесь имеется в виду деструктуризация.
Скажем, имеется объект, содержащий поле c ключом myFunc
var obj = {
myFunc: () => 'Я то-то создаю',
};
Положим, Вам понадобится использовать ...
4
голоса
Принятый
react horizontal scroll to section mouse wheel
Cразу скажу, что задача не тривиальная, хотя с виду кажется простой. Решать ее можно по разному. Я получил удовольствие решая эту задачу (больше бы таких), надеюсь Вы получите пользу от моего решения. ...
4
голоса
useEffect вызывается 2 раза при рендере несмотря на пустой массив зависимостей
StrictMode выполняет рендеринг компонентов дважды в development режиме, но не в production. По мнению разработчиков React - это позволяет обнаружить некоторые проблемы в вашем коде, если таковые будут ...
4
голоса
Как при вводе в определённый input запретить ввод символов +, = и &?
Первый вариант. Все символы которые хотите исключить добавьте в массив symbolsForExcept
const symbolsForExcept = ["&", "+", "="];
export default function App() {
...
4
голоса
Принятый
Как jest считает процент покрытия?
Jest считает покрытие кода используя плагин babel-plugin-istanbul.
Детально как это все работает под капотом можно прочитать тут. Я не стал все это переводить и добавлять в ответ так как очень много ...
3
голоса
{' '} - зачем это пишут в React JS после блока?
оно нужно, что бы вставить именно пробел - иногда строки склеиваются не там, где это нужно. На enSO есть пример с объяснением.
<div>
Text
<a>some Text</a>
</div>
будет ...
3
голоса
AutoImport в PhpStorm не работает (react-app)
Наведи мышку на нужный тебе элемент, далее зажми Alt+Enter и выбери как на скриншоте:
Экспорт по дефолту плохая практика, приучай себя экспортировать правильно:
export { TestComp } вместо export ...
3
голоса
Принятый
Фильтрация массива объектов по конкретному свойству
Можно использовать промежуточный объект Set для избавления от дубликатов (передав в конструктор массив названий улиц):
return (
<ul>
{[...new Set(housingStock.map(hs => hs.streetName))]....
3
голоса
Вместить текст в блок с максимальным размером шрифта ReactJS
Простое решение это, как уже писали в комментариях, сверять clientHeight и scrollHeight
(function() {
var minSize = 15,
maxSize = 120,
textarea = document.querySelectorAll("textarea")[...
3
голоса
Принятый
Нужно ли мемоизировать функцию, которая передается как параметр в хук
Нужно оборачивать. Каждый раз когда создается новая функция, это новый объект, даже если тело функции не изменилось, поэтому если ее не обернуть в useCallback, useCallback в хуке будет отдавать новую ...
3
голоса
Принятый
React. Несколько событий на одну кнопку
В методе showGoods необходимо проверять id. Если id равен активному activeItemId из state (второе нажатие) то сбрасываем activeItemId в null:
showGoods(id) {
this.setState({
activeItemId: ...
3
голоса
Не работает корректно insertBefore
Сделал вам простой вариант перемещения тудушки в списке
function movingTodo(direction) {
const todoActive = document.querySelector('.todo.active');
switch (direction) {
case 'top':
...
3
голоса
Почему не отображаются стили REACT JS?
[cl.myModal, cl.active].join("")
В этой строке вы склеиваете два имени класса без разделителя, я бы попробовал так:
[cl.myModal, cl.active].join(" ")
3
голоса
Принятый
Как скрыть компонент Footer при определенном URL
В том месте, где выводится Footer, нужно добавить Route и использовать его свойство render. Это функция, которая принимает объект со всей информацией по маршруту - там уже можно сделать проверки и ...
3
голоса
React Router: this is undefined
В классовом компоненте нужно добавить конструктор (и начальное состояние тоже в конструкторе нужно объявить):
constructor(props) {
super(props);
this.state = {
cars: [
{ name: "Ford&...
3
голоса
Как сортировать массив по дате , чтоб сначала были старые
Вы объект затолкали в скобки массива, это не правильно.
Сортировать можно так:
const obj = {
0: { id: 4, enterpriseId: 26, date: '2022-01-21', total: 1000 },
1: { id: 5, enterpriseId: 26,...
3
голоса
Typescript+mobx
Я бы посоветовал определить конкретные строковые значения для параметра chartName. Тогда ts будет знать, что вы собираетесь присвоить значения только определенным полям класса
Это могло бы выглядеть ...
3
голоса
Реализация эффекта постепенного уменьшения, после выделенной области
const items = [...list.querySelectorAll('li')]
list.addEventListener('focusin', (event) => {
items.forEach((item) => item.style.setProperty('--scale', '100%'));
items.forEach((item, index) =...
3
голоса
Принятый
useEffect вызывается 2 раза при рендере несмотря на пустой массив зависимостей
Очень похоже на баг реакта. А может и не баг (источник):
Stricter Strict Mode: In the future, React will provide a feature that lets components preserve state between unmounts. To prepare for it, ...
3
голоса
Принятый
Ошибка с тегом фрагмент, не принимает key
Конкретно в вашем примере для того, чтобы избавиться от сообщения об ошибке, нужно добавить key лишь для корневого узла (в нашем случае это фрагмент) компонента Columns2. Однако для того, чтобы ...
2
голоса
React песочница
Официальный сайт реакта советует эти площадки
Онлайн-песочницы
Если вы просто хотите немного поиграть с React, попробуйте
онлайн-песочницу. Например, вот простейший шаблон на CodePen,
CodeSandbox или ...
2
голоса
React Socket io client отправка файлов
import React, {useEffect} from "react";
const [stateComponent, setStateComponent] = React.useState({
files: [],
uploading: false
});
useEffect(() => {
if (socket && stateComponent....
2
голоса
Принятый
Использование одного из типов для TypeScript. React
Есть набросок решения на голом TypeScript. Увязал тип и значение в одной структуре, что позволяет их анализировать в паре (Discriminating Unions). Благодаря этому число приходит туда где ожидается ...
2
голоса
svg многоугольник с двойной обводкой
Лучше всего использовать обтравочный контур (clipping path) или маску.
Вот версия обтравочного контура:
<svg width="400" viewBox="-100 -100 200 200">
<defs>
<clipPath id="...
2
голоса
Принятый
Реализация массива с уникальными элементами
Создаём массив с последними выбранными цветами, далее в зависимости от выбранного цвета обновляем список последних выбранных цветов и подрезаем его до 5 элементов. Получается примерно так:
import ...
2
голоса
Реализация массива с уникальными элементами
const arrColor = ['yellow', 'black', 'purple', 'white', 'green']
function addColor(color) {
arrColor.forEach((item) => { // пробегаемся по всем элементам массива
if (...
Only top scored, non community-wiki answers of a minimum length are eligible
Связанные метки
reactjs × 5299javascript × 2708
redux × 562
node.js × 297
typescript × 261
css × 244
react-router × 231
html × 213
react-native × 213
react-hook × 210
webpack × 129
react-router-dom × 124
jsx × 115
axios × 113
create-react-app × 107
frontend × 98
json × 95
express × 80
state × 75
nextjs × 69
fetch × 67
npm × 65
массивы × 64
material-ui × 61
firebase × 58