0
156
ViewsReact Transition Group: no lo entiendo bien
Estoy tratando de hacer una serie de imágenes que cambien de imagen cada pocos segundos.
Hice que cambiara al azar y ahora estoy tratando de agregar una transición para que se vea más bonito.
La única forma en que vi que es posible con React es usando react-transition-group.
así que hice este useEffect :
const [imageSrc, setImageSrc] = useState(image1); const inProp = useRef(true); const defaultStyle = { transition: `opacity 2s ease-in-out`, opacity: 0, }; const transitionStyles = { entering: { opacity: 1 }, entered: { opacity: 1 }, exiting: { opacity: 0 }, exited: { opacity: 0 }, }; useEffect(() => { const changeImage = () => { const imagesArr = [image1, image2, image3]; const imagesLength = imagesArr.length; let random = Math.floor(Math.random() * imagesLength); setImageSrc(imagesArr[random]); inProp.current = !inProp.current; }; setInterval(changeImage, 6000); return () => { clearInterval(changeImage); }; }, []); <Transition in={inProp.current} timeout={300}> {(state) => ( <img src={imageSrc} alt="about-img" className="about-img" style={{ ...defaultStyle, ...transitionStyles[state], }} /> )} </Transition>También me sale este tipo de error:
Entonces, lo que sucede ahora hace una transición, pero no de la manera que yo quiero. Quiero hacer la transición en cada cambio de imagen. tal vez ustedes me pueden ayudar por favor? Muchas gracias !
1 answers
Answer question0
Es probable que esté utilizando React.StrictMode . Aquí se presenta una solución alternativa mediante la eliminación de StrictMode , sin embargo, eso solo debe intentarse si todo lo demás falla.
La documentación propone agregar refs. Aquí podemos ver un ejemplo de ello:
import React, { createRef, Component } from "react"; // ChildComponent uses React.forwardRef to obtain the ref passed to it // and then forward it to the DOM div that it renders. const ChildComponent = React.forwardRef((props, ref) => <div ref={ref}> <span>{props.children}</span> </div> ); class MyComponent extends Component { componentDidMount() { const node = this.childRef.current; /* Uses DOM node */ } childRef = createRef(); render () { return ( // Pass the created ref to ChildComponent <ChildComponent ref={this.childRef}>{this.props.children}</ChildComponent> ); } } export default MyComponent;Así que nosotros:
-
importcreateRef - instanciarlo
- agregue un atributo
refal marcado del componente que apunte athis.childRef