Запитання з тегом «reactjs»

У мене є додаток для реагування, створене програмою create-react-app. Після запуску npm start (скрипт запуску присутній у package.json як "start": "start-scripts start") на консолі написано Запуск сервера розробки як звичайно та запуску браузера. Але після цього і консоль, і браузер не роблять абсолютно нічого нескінченно. Відсутня помилка чи вихід. Він …

15 reactjs  npm  create-react-app  react-scripts 

Нещодавно я почав використовувати TypeScript з Expo. Я зробив усі інтеграції ліній / форматів, як, typescript-eslintщоб я міг вловити більшість помилок під час кодування. Щоб перевірити, чи складається код, я запускаю npx tscкожного разу і виправляю відповідно. Одне, що я ще не повністю зрозумів, - це те, що моє додаток …

15 reactjs  typescript  react-native  expo 

Я новачок у Next.js, і мені цікаво, як, наприклад, переадресувати з початкової сторінки ( / ) на / hello-nextjs . Як тільки користувач завантажує сторінку, а потім визначте, чи шлях === / перенаправлення до / hello-nextjs У реактор-маршрутизаторі ми робимо щось на кшталт: <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect …

15 html  reactjs  routing  react-router  next.js 

Я намагаюся завантажити перегляд деталей на основі маршруту реагування-маршрутизатора, який повинен захопити параметр URL (id) і використовувати його для подальшого заповнення компонента. Мій маршрут виглядає так, /task/:idі мій компонент добре завантажується, поки я не спробую схопити: id з URL-адреси так: import React from "react"; import { useParams } from "react-router-dom"; …

14 reactjs  react-router 

Я бачу, що React.forwardRef, здається, є санкціонованим способом передачі відгуку до дочірнього функціонального компонента від реагуючих документів: const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>; Однак …

13 javascript  reactjs  performance 

Я намагаюся створити новий проект, використовуючи create-react-appкоманду, задану в документах, тобто, npx create-react-app my-appале він не містить папок, таких як public srcі script.

13 reactjs  create-react-app 

Я пройшов дефініції двох таких як: Чисті функції - це ті, які не намагаються змінити свої входи і завжди повертають однаковий результат для тих же входів. Приклад function sum(a, b) { return a + b; } І незрозуміла функція - це та, яка змінює власний вклад. Приклад function withdraw(account, amount) …

12 javascript  reactjs  redux 

Я створюю спільну бібліотеку компонентів React. Бібліотека містить багато компонентів, але кінцевому користувачеві може знадобитися використовувати лише деякі з них. Коли ви з'єднуєте код за допомогою Webpack (або посилок, або згуртування), він створює один єдиний файл із усім кодом . З міркувань продуктивності я не хочу, щоб весь цей код …

12 reactjs  npm  webpack  es6-modules  rollup 

Мене цікавить, як реалізувати OAuth в React за допомогою popup ( window.open). Наприклад, у мене є: mysite.com - саме тут я відкриваю спливаюче вікно. passport.mysite.com/oauth/authorize - вискочити. Головне питання - як створити з'єднання між window.open(спливаючим) та window.opener(як відомо, window.opener є нульовим через захист міждоменів, тому ми більше не можемо ним …

12 javascript  reactjs  oauth  popup  authorization 

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

12 reactjs  material-ui 

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

12 javascript  node.js  reactjs  react-hooks 

Це мій компонент. Я використовую функцію вбудованої стрілки, щоб змінити маршрут onClickdiv, але я знаю, що це не гарний спосіб з точки зору продуктивності 1. Функція вбудованої стрілки changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> <div onClick={() => this.changeRoute("page2")}>2</div> </> ) } 2. …

11 javascript  reactjs 

Я встановив material-ui / lab для того, щоб користуватися компонентом попередження, але щоразу, коли я імпортую його: import Alert from '@material-ui/lab/Alert';він не може компілювати та видаляє цю помилку: ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. Тож я спробував google цю проблему та знайшов інше запитання щодо material-ui/lab/AutoCompleteкомпонента …

11 javascript  node.js  reactjs  material-ui 

Під час запуску свого проекту в браузері я отримав таку помилку: Не вдалося компілювати: ./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 …

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