Preguntas etiquetadas con reactjs

Estoy buscando formas de implementar el desplazamiento infinito con React. Me encontré con react-infinite-scroll y lo encontré ineficiente ya que solo agrega nodos al DOM y no los elimina. ¿Existe alguna solución probada con React que agregue, elimine y mantenga un número constante de nodos en el DOM? Aquí está …

89 javascript  html  infinite-scroll  reactjs 

Quiero importar un archivo CSS en un componente de reacción. Lo intenté import disabledLink from "../../../public/styles/disabledLink";pero aparece el siguiente error; Módulo no encontrado: Error: No se puede resolver 'archivo' o 'directorio' ../../../public/styles/disabledLink en c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /client/src/components/ShoppingCartLink.js …

89 javascript  reactjs  relative-path 

La entrada de texto está alineada al centro, cómo arreglar esta entrada de texto para que tome la entrada desde la esquina superior izquierda Aquí está mi css para la entrada de texto /* The Text input is center aligned, how to fix this text input so that it takes …

89 javascript  ios  reactjs  react-native 

Digamos que tengo una simple palanca: Cuando hago clic en el botón, el componente Color cambia entre rojo y azul Podría lograr este resultado haciendo algo como esto. index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': …

89 javascript  reactjs  redux 

Quiero cerrar un menú desplegable cuando se produce un clic fuera del componente desplegable. ¿Cómo puedo hacer eso?

89 reactjs 

Estoy reescribiendo mi aplicación para usar Flux y tengo un problema con la recuperación de datos de las tiendas. Tengo muchos componentes y anidan muchos. Algunos de ellos son grandes ( Article), otros son pequeños y simples ( UserAvatar, UserLink). He estado luchando con el lugar de la jerarquía de …

89 javascript  reactjs  reactjs-flux 

¿Cuál es el patrón recomendado para hacer un setState en un componente principal desde un componente secundario? var Todos = React.createClass({ getInitialState: function() { return { todos: [ "I am done", "I am not done" ] } }, render: function() { var todos = this.state.todos.map(function(todo) { return <div>{todo}</div>; }); return …

89 reactjs 

Estoy tratando de hacer que ReactJS funcione con rieles usando este tutorial. Recibo este error: Uncaught ReferenceError: React is not defined Pero puedo acceder al objeto React en la consola del navegador . También agregué public / dist / turbo-react.min.js como se describe aquí y también agregué una línea en …

89 javascript  ruby-on-rails  reactjs 

Estoy luchando por resolver el problema con la siguiente sintaxis: export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) { dispatch({ type: EMAIL_FETCHING, payload: false }); throw new Error(error); } …

89 javascript  reactjs  async-await  redux 

Aquí están los números min + gzip 26k gzip 90k original 450 + k Y React no tiene muchas características en su documentación. porque es tan grande? Tengo la sensación de que es la implementación de DOM ligero. Pero quiero estar seguro.

88 reactjs 

Tengo pruebas unitarias para mi reducers. Sin embargo, cuando estoy depurando en el navegador, quiero comprobar si mis acciones se han llamado correctamente y si el estado se ha modificado en consecuencia. Estoy buscando algo como: window._redux.store ... en el navegador para poder escribir eso en la consola y comprobar …

88 javascript  reactjs  redux 

Estoy migrando un proyecto de React con TypeScript para usar funciones de hooks (React v16.7.0-alpha), pero no puedo averiguar cómo configurar los tipos de los elementos desestructurados. Aquí hay un ejemplo: interface IUser { name: string; } ... const [user, setUser] = useState({name: 'Jon'}); Quiero forzar que la uservariable sea …

88 reactjs  typescript  react-hooks 

Estoy implementando un ejemplo de https://github.com/moroshko/react-autosuggest El código importante es así: import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an …

87 javascript  json  reactjs  webpack 

Tengo una reactjsaplicación escrita con los estándares ES6 y la uso webpackpara crearla. Las webpackcargas de los jsmódulos usando babel-loader. Para ser específico, utilizo las siguientes versiones de paquetes: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 Sin embargo, después de construirlo, el IE 10 da el siguiente error 'Symbol' …

87 reactjs  webpack  babeljs 

Mientras desarrollaba con create-react-app, mi navegador entra en modo depurador en las advertencias: Se rompe en el código fuente de react-dev-tools: // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the "break on warnings" feature. // Use the browser's Call Stack panel …

87 reactjs  javascript-debugger