Tag: reactjs

¿Cómo puedo hacer que Font Awesome 5 funcione con React?

En el siguiente ejemplo, el icono inicial se procesa pero no cambia cuando cambia la clase. const Circle = ({ filled, onClick }) => { const className = filled ? ‘fas fa-circle’ : ‘far fa-circle’; return ( (class is {className}) ); }; class App extends React.Component { state = { filled: false }; handleClick = […]

¿Cuándo cambia el estado de setState de React?

Tengo una función open() en un componente secundario que llama a la función principal open() través de props , y podría ser varias veces seguidas. la función principal contiene esta línea this.setState({numOpen: (++this.state.numOpen)}); Esta línea funciona y actualiza el estado en cada incremento. Pero antes, esta línea. this.setState({numOpen: (this.state.numOpen + 1)}); Salté varios incrementos y […]

¿Reaccionar contra el patrón?

¿Es el siguiente patrón anti en reactjsr? Me gusta el patrón porque me da contexto en las funciones estáticas cuando se ha creado una instancia de un componente. Luego, más tarde, puedo importar la clase y llamar a un método estático para modificar el estado. ¿O se puede hacer esto de una mejor manera? // […]

Incapaz de pasar props a componente a través de react-router

No puedo pasar los apoyos usando react-router. Mi código hasta ahora: import React from ‘react’; import ReactDOM from ‘react-dom’; import { BrowserRouter, Route, Switch } from ‘react-router-dom’; import ‘normalize.css/normalize.css’; import ‘./styles/styles.scss’; const EditExpensePage = props => { console.log(props); return Editing the expense with id of ; }; const AppRouter = () => { return ( […]

Hacer que React use useffect hook no se ejecute en el renderizado inicial

Según los documentos: componentDidUpdate() se invoca inmediatamente después de producirse la actualización. Este método no se llama para el render inicial. Podemos usar el nuevo gancho useEffect() para simular componentDidUpdate() , pero parece que useEffect() se ejecuta después de cada procesamiento, incluso la primera vez. ¿Cómo consigo que no se ejecute en el render inicial? […]

Enrutador de reacción con rutas dinámicas. Da 404 en un enlace directo del navegador.

Tengo un Front-end React conectado a WordPress API y las rutas se definen en el lado del cliente con React Router . Cuando uso Link para dirigirlos a rutas dinámicas, funcionan bien. Pero cuando uso la barra de direcciones del navegador directamente para acceder a los enlaces, presione Intro o actualice. 404 Pagina no encontrada […]

Pasar prop de niño a padre reactjsr

En el componente WeatherForecast necesito pasar el valor devuelto de la función appColor a una propiedad. Entonces, la propiedad de WeatherForecast debe pasar a className del componente de la app . Nuevo para reactjsr. No estoy seguro de cómo pasar la propiedad del niño al componente. class WeatherForecast extends Component { appColor(weatherData) { //Check for […]

React router v4 – Rutas autorizadas con HOC

Tengo un problema para evitar que usuarios no autorizados accedan a rutas / componentes solo autorizados, como el panel de control de usuarios registrados. Tengo el siguiente código: import React from ‘react’ //other imports import {withRouter} from ‘react-router’ class User extends React.Component { constructor(props) { super(props) console.log(‘props’, props) let user = JSON.parse(localStorage.getItem(‘userDetails’)) if(!user || !user.user […]

Token inesperado al renderizar el componente React

Este es un fragmento de mi código de componente: renderEditor() { return ( ); } render() { return ( {this.renderEditor()} ); } Pero cuando ejecuto este código obtengo un error de token inesperado en {this.renderEditor()} . ¿Por qué sucede esto y cómo puedo solucionarlo?

El método de configuración de useState no refleja el cambio inmediatamente

Estoy tratando de aprender ganchos y el método useState me ha confundido. Estoy asignando valor inicial a un estado en forma de una matriz. El método de configuración en useState no funciona para mí, incluso con spread(…) o without spread operator . He creado una API en otra PC a la que llamo y obtengo […]

Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.