Preguntas etiquetadas con reactjs

Estoy creando una biblioteca de componentes React que se puede compartir. La biblioteca contiene muchos componentes, pero es posible que el usuario final solo necesite usar algunos de ellos. Cuando agrupa el código con Webpack (o Parcel o Rollup), crea un solo archivo con todo el código . Por razones …

12 reactjs  npm  webpack  es6-modules  rollup 

Estoy interesado en cómo implementar OAuth en React usando popup ( window.open). Por ejemplo tengo: mysite.com - Aquí es donde abro la ventana emergente. passport.mysite.com/oauth/authorize - surgir. La pregunta principal es cómo crear una conexión entre window.open(ventana emergente) y window.opener(como se conoce, el window.opener es nulo debido a la seguridad …

12 javascript  reactjs  oauth  popup  authorization 

Quiero usar Autocompletecomponentes para etiquetas de entrada. Estoy tratando de obtener las etiquetas y guardarlas en un estado para luego poder guardarlas en la base de datos. Estoy usando funciones en lugar de clases en react. Lo intenté onChange, pero no obtuve ningún resultado. <div style={{ width: 500 }}> <Autocomplete …

12 reactjs  material-ui 

React Hooks nos da la opción useState, y siempre veo las comparaciones Hooks vs Class-State. Pero, ¿qué pasa con los ganchos y algunas variables regulares? Por ejemplo, function Foo() { let a = 0; a = 1; return <div>{a}</div>; } No utilicé Hooks, y me dará los mismos resultados que: …

12 javascript  node.js  reactjs  react-hooks 

Recibí el siguiente error cuando ejecuté mi proyecto en el navegador: Error al compilar: ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. Estoy intentando implementar el componente Autocompletar (del ejemplo en la sección "Valores múltiples"). Aquí está el código que estoy usando: import React from 'react'; import Chip …

11 reactjs  typescript  material-ui 

Hice un <If />componente de función simple usando 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; } Me permite escribir un código más limpio, como: render() …

11 javascript  reactjs  typescript 

TL; DR ¿Cómo puede un componente principal saber cuándo ha finalizado la representación de cada componente secundario y el DOM visible para el usuario con su versión más actualizada? Digamos que tengo un componente component Asecundario Gridque consta de 3x3componentes de nieto. Cada uno de esos componentes nietos obtiene datos …

11 reactjs 

Chicos, estoy enfrentando un problema. Tengo un dato bidimensional. Los datos tienen una estructura anidada que contiene enlaces. const data = [ // First Div Panel [ { id: 1, url: "/services", title: "Services" }, { id: 2, title: "Products", children: [ { id: 3, url: "/themes-templates", title: "Themes & …

11 reactjs 

Estoy creando una aplicación React de una sola página, y he notado que la restauración de desplazamiento no parece funcionar como se esperaba en Chrome (y tal vez en otros navegadores). En el repositorio github react-router-dom, tienen una página que dice que los navegadores están comenzando a manejar de forma …

11 javascript  reactjs  google-chrome  react-router 

Tengo una aplicación React (que no usa la aplicación Create React) creada con TypeScript, Jest, Webpack y Babel. Cuando intento ejecutar "broma de hilo", aparece el siguiente error: He intentado eliminar todos los paquetes y volver a agregarlos. No resuelve esto. He examinado preguntas y documentación similares y sigo malinterpretando …

11 reactjs  jestjs  babeljs  babel-jest  ts-jest 

Quiero entender cuál es la forma más general o correcta de manejo de errores con React-Redux. Supongamos que tengo un componente de registro de número de teléfono. Ese componente arroja un error que dice si el número de teléfono de entrada no es válido ¿Cuál sería la mejor manera de …

11 reactjs  redux 

Este es mi componente. Estoy usando la función de flecha en línea para cambiar la ruta onClickde div, pero sé que no es una buena manera en términos de rendimiento. 1. Función de flecha en línea changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> …

10 javascript  reactjs 

Voy a diseñar una navegación de cajones en mi proyecto. Lo instalé con este comando: npm install @react-navigation/drawer Luego importó eso a App.js import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; Este es mi package.jsoncontenido: "@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 

Estoy tratando de entender el useEffectgancho en profundidad. Me gustaría saber cuándo usar qué método y por qué. 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 

Tengo un caso en el que necesito saber si el usuario ha iniciado sesión o no antes de que la página se muestre en el lado del servidor y me la envíe de nuevo usando Next.js para evitar cambios de parpadeo en la interfaz de usuario. Pude descubrir cómo evitar …

10 javascript  reactjs  typescript  next.js