Preguntas etiquetadas con reactjs

React (también conocido como React.js o ReactJS) es una biblioteca de JavaScript desarrollada por Facebook para construir interfaces de usuario. Utiliza un paradigma declarativo basado en componentes y pretende ser eficiente y flexible.

8
¿Cómo renderizo elementos hermanos sin envolverlos en una etiqueta principal?
En la mayoría de los casos, tener una etiqueta principal no es un problema. React.createClass({ render: function() { return ( <tbody> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> </tbody> ); } }); Pero hay algunos casos en los que tiene sentido tener elementos hermanos en una función de renderizado sin un padre, y …
82 reactjs 
10
Controladores de eventos en componentes sin estado de React
Tratando de encontrar una forma óptima de crear controladores de eventos en los componentes sin estado de React. Podría hacer algo como esto: const myComponent = (props) => { const myHandler = (e) => props.dispatch(something()); return ( <button onClick={myHandler}>Click Me</button> ); } El inconveniente aquí es que cada vez que …
6
Escuche la pulsación de tecla para el documento en reactjs
Quiero enlazar para cerrar la escapeventana emergente de arranque de reacción activa al presionar. Aquí está el código _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, Pero no se registra …
1
¿Dónde está la conexión entre index.html e index.js en una aplicación Create-React-App?
Estoy empezando a jugar con la aplicación Create React, pero no puedo entender cómo index.jsse carga en el interior index.html. Este es el código html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <!-- Notice the use of %PUBLIC_URL% in the tag above. …
21
Reaccionar el enrutador cambia la URL pero no ver
Tengo problemas para cambiar la vista al reaccionar con el enrutamiento. Solo quiero mostrar una lista de usuarios, y al hacer clic en cada usuario, debo navegar a una página de detalles. Aquí está el enrutador: import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; …
5
Módulo no encontrado: 'redux'
He creado una nueva aplicación de reacción usando create-react-appcli. Luego agregué la 'react-redux'biblioteca usando npm install --save react-redux. En package.jsontengo: "react-redux": "^4.4.5" Desafortunadamente, la aplicación no se compila y se queja con: Error in ./~/react-redux/lib/utils/wrapActionCreators.js Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils @ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29 No tengo ni idea de lo …
3
¿Qué significa ... descansar en React JSX?
Mirando este ejemplo de React Router Dom v4 https://reacttraining.com/react-router/web/example/auth-workflow , veo que el componente PrivateRoute destruye un apoyo de descanso como este const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: …
5
¿Cómo puedo renderizar elementos React repetidos?
He escrito un código para renderizar elementos repetidos en ReactJS, pero odio lo feo que es. render: function(){ var titles = this.props.titles.map(function(title) { return <th>{title}</th>; }); var rows = this.props.rows.map(function(row) { var cells = []; for (var i in row) { cells.push(<td>{row[i]}</td>); } return <tr>{cells}</tr>; }); return ( <table className="MyClassName"> …
6
Reaccionar: en línea condicionalmente pasar prop al componente
Me gustaría saber si hay una mejor manera de pasar un accesorio condicionalmente que usar una declaración if. Por ejemplo, ahora mismo tengo: var parent = React.createClass({ propTypes: { editable: React.PropTypes.bool.isRequired, editableOpts: React.PropTypes.shape({...}) }, render: function() { if(this.props.editable) { return ( <Child editable={this.props.editableOpts} /> ); } else { // In …
3
El package.json local existe, pero faltan node_modules
Estoy intentando iniciar una aplicación Redux que acabo de clonar desde un repositorio de GitHub. Traté de ejecutarlo con el siguiente comando npm start Estoy recibiendo este error > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./configs/webpack/webpack.config.development.js sh: 1: webpack-dev-server: not found npm ERR! file sh npm ERR! code ELIFECYCLE npm …
7
¿Cómo restringir el acceso a las rutas en react-router?
¿Alguien sabe cómo restringir el acceso a rutas particulares en react-router? Quiero comprobar si el usuario está conectado antes de permitir el acceso a una ruta en particular. Pensé que sería simple, pero los documentos no tienen claro cómo hacerlo. ¿Es esto algo que debería configurar donde defino mis <Route>componentes, …
4
En JSX, ¿cómo configuro un className como cadena + {prop}
Soy un poco nuevo en React e intento establecer un className como string + prop. Pero no estoy seguro de cómo hacerlo y si esa es la mejor práctica. Entonces, lo que estoy tratando de hacer, y obviamente no está funcionando, es esto: <a data-featherlight='string' + {this.props.data.imageUrl}> ¿Cómo haría para …
81 reactjs 
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.