Вопросы с тегом «reactjs»

Меня интересует, как реализовать OAuth в React с помощью popup ( window.open). Например у меня есть: mysite.com - здесь я открываю всплывающее окно. passport.mysite.com/oauth/authorize - неожиданно возникнуть. Основной вопрос - как создать соединение между window.open(popup) и window.opener(как известно, window.opener имеет значение null из-за междоменной безопасности, поэтому мы больше не можем …

12 javascript  reactjs  oauth  popup  authorization 

Я хочу использовать Autocompleteкомпонент для ввода тегов. Я пытаюсь получить теги и сохранить их в состоянии, чтобы потом можно было сохранить их в базе данных. Я использую функции вместо классов в реакции. Я пытался onChange, но я не получил никакого результата. <div style={{ width: 500 }}> <Autocomplete multiple options={autoComplete} filterSelectedOptions …

12 reactjs  material-ui 

React Hooks дают нам опцию useState, и я всегда вижу сравнения Hooks и Class-State. Но как насчет хуков и некоторых обычных переменных? Например, function Foo() { let a = 0; a = 1; return <div>{a}</div>; } Я не использовал крючки, и это даст мне те же результаты, что и: function …

12 javascript  node.js  reactjs  react-hooks 

Я получил следующую ошибку при запуске проекта в браузере: Не удалось скомпилировать: ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. Я пытаюсь реализовать компонент автозаполнения (из примера в разделе «Несколько значений»). Вот код, который я использую: import React from 'react'; import Chip from '@material-ui/core/Chip'; import Autocomplete from '@material-ui/lab/Autocomplete'; …

11 reactjs  typescript  material-ui 

Я сделал простой <If />компонент функции, используя React: import React, { ReactElement } from "react"; interface Props { condition: boolean; comment?: any; } export function If(props: React.PropsWithChildren<Props>): ReactElement | null { if (props.condition) { return <>{props.children}</>; } return null; } Это позволяет мне писать более чистый код, такой как: render() …

11 javascript  reactjs  typescript 

TL; DR Как родительский компонент может знать, когда закончился рендеринг каждого дочернего компонента, и DOM виден пользователю с его самой последней версией? Допустим, у меня component Aесть дочерний Gridкомпонент, состоящий из 3x3компонентов внука. Каждый из этих компонентов внука извлекает данные из конечной точки API успокоительного и отображает себя, когда данные …

11 reactjs 

Парень, я столкнулся с проблемой. У меня есть двумерные данные. Данные имеют вложенную структуру, которая содержит ссылки. const data = [ // First Div Panel [ { id: 1, url: "/services", title: "Services" }, { id: 2, title: "Products", children: [ { id: 3, url: "/themes-templates", title: "Themes & Templates" …

11 reactjs 

Я создаю одностраничное приложение React и заметил, что восстановление прокрутки не работает должным образом в Chrome (и, возможно, в других браузерах). На GitHub-репо реакции-router-dom у них есть страница, на которой говорится, что браузеры начинают обрабатывать прокрутку для одностраничных приложений, и поведение будет аналогичным традиционному веб-сайту, не относящемуся к SPA, если …

11 javascript  reactjs  google-chrome  react-router 

У меня есть приложение React (не использующее Create React App), созданное с использованием TypeScript, Jest, Webpack и Babel. При попытке запустить "пряжу шут", я получаю следующую ошибку: Я попытался удалить все пакеты и повторно добавить их. Это не решает это. Я посмотрел на подобные вопросы и документацию и до сих …

11 reactjs  jestjs  babeljs  babel-jest  ts-jest 

Я хочу понять, что является более общим или правильным способом обработки ошибок с помощью React-Redux. Предположим, у меня есть компонент для регистрации номера телефона. Этот компонент выдает ошибку, скажем, если номер телефона введен неверно Как лучше всего справиться с этой ошибкой? Идея 1: Создать компонент, который принимает ошибку и отправляет …

11 reactjs  redux 

Это мой компонент, я использую встроенную функцию стрелки, чтобы изменить маршрут onClickdiv, но я знаю, что это не очень хороший способ с точки зрения производительности 1. Встроенная функция стрелки changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> <div onClick={() => this.changeRoute("page2")}>2</div> </> ) } …

10 javascript  reactjs 

Я собираюсь разработать навигацию по ящикам в моем проекте. Я установил это с помощью этой команды: npm install @react-navigation/drawer Затем импортировать это в App.js import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; Это мой package.jsonконтент: "@react-native-community/masked-view": "^0.1.6", "@react-navigation/drawer": "^5.0.0", "react": "16.9.0", "react-native": "0.61.5", "react-native-gesture-handler": "^1.5.6", "react-native-reanimated": …

10 reactjs  react-native  navigation-drawer  react-navigation 

Я пытаюсь понять useEffectкрюк всесторонне. Я хотел бы знать, когда использовать какой метод и почему? 1.useEffect with no second paraments useEffect(()=>{}) 2.useEffect with second paraments as [] useEffect(()=>{},[]) 3.useEffect with some arguments passed in the second parameter useEffect(()=>{},[arg])

10 javascript  reactjs  react-redux 

У меня есть случай, когда мне нужно знать, вошел ли пользователь в систему или нет, прежде чем страница будет обработана на стороне сервера и отправлена ​​мне обратно с помощью Next.js, чтобы избежать мерцания изменений в пользовательском интерфейсе. Мне удалось выяснить, как запретить пользователю доступ к некоторым страницам, если он уже …

10 javascript  reactjs  typescript  next.js 

Я рендеринг компонентов из моей внешней (node_modules) библиотеки шаблонов. В моем основном приложении я передаю свой Linkэкземпляр из react-router-domкомпонента моих внешних библиотек следующим образом: import { Link } from 'react-router-dom'; import { Heading } from 'my-external-library'; const articleWithLinkProps = { url: `/article/${article.slug}`, routerLink: Link, }; <Heading withLinkProps={articleWithLinkProps} /> В моей …

10 javascript  reactjs  react-router-dom