Preguntas etiquetadas con reactjs

Digamos que tengo un componente de vista que tiene un render condicional: render(){ if (this.state.employed) { return ( <div> <MyInput ref="job-title" name="job-title" /> </div> ); } else { return ( <div> <MyInput ref="unemployment-reason" name="unemployment-reason" /> <MyInput ref="unemployment-duration" name="unemployment-duration" /> </div> ); } } MyInput se parece a esto: class MyInput …

103 javascript  reactjs 

¿Cuál es la diferencia entre cargadores y complementos en webpack? La documentación de los complementos solo dice: Use complementos para agregar funcionalidades típicamente relacionadas con los paquetes en el paquete web. Sé que babel usa un cargador para las transformaciones jsx / es2015, pero parece que otras tareas comunes (copy-webpack-plugin, …

103 javascript  reactjs  webpack 

Sin usar la clase, ¿cómo uso PropTypes en el componente funcional sin estado de react? export const Header = (props) => ( <div>hi</div> )

103 javascript  reactjs  react-props  react-proptypes 

Siempre que intento usar un ícono de Font Awesome en React render(), no se muestra en la página web resultante, aunque funciona en HTML normal. render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } Aquí hay un ejemplo en vivo: http://jsfiddle.net/pLWS3/ ¿Dónde está la culpa?

103 reactjs  font-awesome 

¿Es posible detectar si la versión actual de React es de desarrollo o producción en tiempo de ejecución? Me gustaría hacer algo como esto: if (React.isDevelopment) { // Development thing } else { // Real thing }

103 javascript  reactjs 

El título lo dice todo. Entiendo por qué componentDidMountes apropiado para cualquier cosa que requiera acceso DOM, pero una solicitud AJAX no necesariamente o normalmente lo necesita. ¿Lo que da?

102 reactjs 

No entiendo cuál es el propósito de usar IndexRoute e IndexLink . Parece que, en cualquier caso, el código a continuación seleccionaría primero el componente Inicio a menos que se activara la ruta Acerca de. <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> vs <Route path="/" component={App}> <Route path="home" …

102 javascript  reactjs  react-router  url-routing 

He instalado eslint-config-airbnb que se supone que preconfigura ESLINT para React: Nuestra exportación predeterminada contiene todas nuestras reglas de ESLint, incluidas ECMAScript 6+ y React. Requiere eslint, eslint-plugin-import, eslint-plugin-react y eslint-plugin-jsx-a11y. Mi .eslintrcampliando su configuración: { "extends": "eslint-config-airbnb", "env": { "browser": true, "node": true, "mocha": true }, "rules": { "new-cap": …

102 javascript  reactjs  eslint  eslint-config-airbnb 

Aquí está mi formulario y el método onClick. Me gustaría ejecutar este método cuando se presiona el botón Enter del teclado. Cómo ? NB: No se agradece jquery. comment: function (e) { e.preventDefault(); this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value}) }, <form className="commentForm"> <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br /> <input type="text" placeholder="userPostId" …

102 reactjs  reactjs-flux 

Tengo un componente que mostrará Array of String. El código se ve así. React.createClass({ render() { <div> this.props.data.map(t => <span>t</span>) </div> } }) Funciona perfectamente bien. es decir, si props.data = ['tom', 'jason', 'chris'] El resultado renderizado en la página sería tomjasonchris Luego, quiero unir todos los nombres usando una …

102 reactjs 

Soy nuevo en React Router y descubro que hay muchas formas de redirigir una página: Utilizando browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); Utilizando this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: …

102 reactjs  redux  react-router 

¿Cómo puede lograr un evento de desplazamiento o un evento activo en ReactJS cuando realiza un estilo en línea? Descubrí que el enfoque onMouseEnter, onMouseLeave tiene errores, por lo que espero que haya otra forma de hacerlo. Específicamente, si pasa el mouse sobre un componente muy rápidamente, solo se registra …

102 javascript  css  reactjs  mouseevent  dom-events 

Creé una aplicación con ReactNative tanto para iOS como para Android con una extensiónListView . Al llenar la vista de lista con una fuente de datos válida, se imprime la siguiente advertencia en la parte inferior de la pantalla: Advertencia: Cada niño en una matriz o iterador debe tener una …

102 facebook  listview  reactjs  react-native 

Tengo algunos efectos secundarios que aplicar y quiero saber cómo organizarlos: como un solo uso Efecto o varios efectos de uso ¿Qué es mejor en términos de rendimiento y arquitectura?

102 reactjs  react-hooks 

Estaba revisando la documentación de los ganchos cuando me encontré con useRef. Mirando su ejemplo ... function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the …

102 javascript  reactjs  react-hooks