Preguntas etiquetadas con reactjs

Vi que React 16 permite que los atributos se pasen al DOM. Entonces, eso significa que se puede usar 'clase' en lugar de className, ¿verdad? Me pregunto si hay ventajas de seguir usando className sobre class, además de ser compatible con versiones anteriores de React.

84 reactjs 

Tengo este componente: import React from 'react'; export default class AddItem extends React.Component { add() { this.props.onButtonClick(this.input.value); this.input.value = ''; } render() { return ( <div className="add-item"> <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} /> <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button> </div> ); } } Quiero que el botón esté …

84 javascript  reactjs 

Estoy tratando de ocultar mi clave API para cuando me comprometo con github, y he buscado orientación en el foro, especialmente la siguiente publicación: ¿Cómo oculto la clave API en create-react-app? Hice los cambios y reinicié el hilo. No estoy seguro de qué estoy haciendo mal - agregué un .envarchivo …

84 reactjs  environment-variables  api-key 

Estoy renderizando un enlace con react: render: -> `<a className="upvotes" onClick={this.upvote}>upvote</a>` Entonces, arriba tengo la función upvote: upvote: -> // do stuff (ajax) Antes del enlace, tenía un intervalo en ese lugar, pero necesito cambiar al enlace y aquí está el problema: cada vez que hago clic en .upvotesla página …

84 reactjs  hyperlink  coffeescript  preventdefault 

Tengo un proyecto que no toqué durante 2 semanas. Lo retiro y ahora, cuando intento ejecutar npm start, recibí este error. > react-scripts start sh: react-scripts: command not found npm ERR! Darwin 16.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node v6.7.0 npm ERR! npm v3.10.3 npm ERR! file …

84 javascript  reactjs  create-react-app 

Estoy usando Reacty ESLintcon eslint-plugin-react. Quiero disablela prop-typesregla en un archivo. var React = require('react'); var Model = require('./ComponentModel'); var Component = React.createClass({ /* eslint-disable react/prop-types */ propTypes: Model.propTypes, /* eslint-enable react/prop-types */ render: function () { return ( <div className="component"> {this.props.title} </div> ); } });

84 reactjs  eslint 

Tratando de averiguar cómo puedo volver a la página anterior. estoy usando[react-router-v4][1] Este es el código que configuré en mi primera página de destino: <Router> <div> <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link> <Route exact path="/" component={Page1}/> <Route path="/Page2" component={Page2}/> <Route path="/Page3" component={Page3}/> </div> </Router> Para reenviar a las páginas siguientes, simplemente …

84 javascript  reactjs  react-router-v4 

Soy nuevo en ReactJS. Anteriormente, usé jQuery para configurar cualquier animación o función que necesitaba. Pero ahora estoy tratando de usar ReactJS y minimizar el uso de jQuery. Mi caso es: Estoy tratando de construir un acordeón con ReactJS. <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> <div …

84 javascript  jquery  reactjs 

Tengo un enrutador como el siguiente: <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Login}/> </Route> </Router> Esto es lo que quiero lograr: Redirigir al usuario a /loginsi no ha iniciado sesión Si el usuario intentó acceder /logincuando ya había iniciado sesión, redirigirlo a la raíz/ así que ahora …

83 javascript  reactjs  react-router 

Supongamos que tengo una cadena de texto que contiene saltos de línea y la renderizo así: render() { var text = "One\nTwo\nThree"; return <div>{text}</div>; } En HTML, los saltos de línea no se representan como saltos de línea. ¿Cómo debo hacer esto en React? No quiero convertir a <br>etiquetas y …

83 reactjs 

Simular el clic de un botón parece una operación muy fácil / estándar. Sin embargo, no puedo hacer que funcione en las pruebas de Jest.js. Esto es lo que intenté (y también lo hice usando jQuery), pero no pareció desencadenar nada: import { mount } from 'enzyme'; page = <MyCoolPage …

83 javascript  reactjs  testing  jestjs  enzyme 

Permítanme explicar el resultado de este código para preguntar mi problema fácilmente. const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, [username]); const …

83 reactjs  react-hooks 

Estoy usando webpack para construir mis componentes de reacción y estoy tratando de usar extract-text-webpack-pluginpara separar mi css de mi archivo js generado. Sin embargo, cuando se intenta generar el componente me sale el siguiente error: Module build failed: ReferenceError: window is not defined. Mi archivo webpack.config.js se ve así: …

82 reactjs  webpack 

Tengo un componente contenedor react-redux que se crea dentro de un componente React Native Navigator. Quiero poder pasar el navegador como un accesorio a este componente contenedor para que después de presionar un botón dentro de su componente de presentación, pueda empujar un objeto a la pila del navegador. Quiero …

82 reactjs  react-native  redux  react-redux 

Quiero renderizar mi componente después de que finalice mi solicitud ajax. Abajo puedes ver mi código var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) { $.each(data, function(index, element){ rows.push(<OptionRow obj={element} />); }); return (<Input type='select'>{rows}</Input>) }) } }); Pero recibo el error a continuación porque estoy …

82 javascript  ajax  asynchronous  reactjs  jquery-deferred