Preguntas etiquetadas con reactjs

Estoy trabajando en una aplicación de reacción usando react-router. Tengo una página de proyecto que tiene una URL de la siguiente manera: myapplication.com/project/unique-project-id Cuando se carga el componente del proyecto, activo una solicitud de datos para ese proyecto desde el evento componentDidMount. Ahora me encuentro con un problema en el …

100 reactjs  react-router 

Así que aquí está mi flujo de trabajo actual para importar imágenes e íconos en el paquete web a través de ES6: import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> Esto se complica rápidamente. Esto es lo que quiero: …

100 reactjs  webpack  ecmascript-6 

Tengo un componente que he creado: class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return { …

100 javascript  reactjs  redux 

¿Cuál es la forma correcta de actualizar el estado, es un objeto anidado, en React with Hooks? export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) ¿Cómo se usaría setExampleStatepara actualizar exampleStatea a(agregar un campo)? …

100 javascript  reactjs  react-hooks 

Acabo de comenzar con Reactjs y estaba escribiendo un componente simple para mostrar la lietiqueta y encontré este error: Token inesperado '<' He puesto el ejemplo en jsbin a continuación http://jsbin.com/UWOquRA/1/edit?html,js,console,output Por favor, avíseme qué estoy haciendo mal.

99 reactjs 

Tengo una navegación lateral con un montón de equipos de baloncesto. Así que me gustaría mostrar algo diferente para cada equipo cuando se pasa el cursor sobre uno de ellos. Además, estoy usando Reactjs, así que si pudiera tener una variable que pudiera pasar a otro componente, sería increíble.

99 hover  reactjs 

¿Hay formas de simular componentDidMounten React componentes funcionales a través de ganchos?

99 javascript  reactjs  react-hooks 

Estoy tratando de importar componentes de react-materialize como - import {Navbar, NavItem} from 'react-materialize'; Pero cuando el paquete web está compilando .tsx, arroja un error para lo anterior como: ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js' implicitly has an …

99 reactjs  webpack  webpack-2 

Tengo algunos datos llamados estaciones, que es una matriz que contiene objetos. stations : [ {call:'station one',frequency:'000'}, {call:'station two',frequency:'001'} ] Me gustaría representar un componente de interfaz de usuario para cada posición de la matriz. Hasta ahora puedo escribir var stationsArr = [] for (var i = 0; i < …

98 javascript  reactjs 

Tengo lo siguiente: <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> Cuando se usa DefaultRoute, SearchDashboard se procesa incorrectamente ya que cualquier * Dashboard debe procesarse dentro de Dashboard. Me gustaría que …

98 javascript  routes  reactjs  url-redirection  react-router 

Estoy creando un formulario en React Native y me gustaría hacer que mi TextInputs 80% del ancho de la pantalla. Con HTML y CSS normal, esto sería sencillo: input { display: block; width: 80%; margin: auto; } Excepto que React Native no admite la displaypropiedad, los anchos de porcentaje ni …

98 javascript  css  reactjs  react-native 

Estoy tratando de pasar un nombre de clase a un componente de reacción para cambiar su estilo y parece que no puedo funcionar: class Pill extends React.Component { render() { return ( <button className="pill {this.props.styleName}">{this.props.children}</button> ); } } <Pill styleName="skill">Business</Pill> Estoy tratando de cambiar el estilo de la píldora pasando …

98 javascript  reactjs 

Tengo la configuración de idioma en el contexto como se muestra a continuación class LanguageProvider extends Component { static childContextTypes = { langConfig: PropTypes.object, }; getChildContext() { return { langConfig: 'en' }; } render() { return this.props.children; } } export default LanguageProvider; El código de mi aplicación será algo como …

98 javascript  reactjs  react-context 

Digamos que tengo una lista de objetos simples en mi this.state.listque luego puedo usar para representar una lista de niños. Entonces, ¿cuál es la forma correcta de insertar un objeto this.state.list? A continuación se muestra la única forma en que creo que funcionará porque no puede mutar this.statedirectamente como se …

97 javascript  reactjs 

Al enviar un formulario, lo intento en doSomething()lugar del comportamiento de publicación predeterminado. Aparentemente, en React, onSubmit es un evento compatible con formularios. Sin embargo, cuando pruebo el siguiente código: var OnSubmitTest = React.createClass({ render: function() { doSomething = function(){ alert('it works!'); } return <form onSubmit={doSomething}> <button>Click me</button> </form>; } …

97 javascript  forms  form-submit  reactjs  onsubmit