He creado un componente que gira una imagen. Dado que necesitaré rotar diferentes imágenes, quería pasar una imagen al componente, en lugar de crear un nuevo archivo de componente de imagen giratorio para cada imagen nueva.

Aquí está mi App.js. Observe cómo estoy tratando de pasar la imagen yellowFlower a un componente llamado RotateYellow

 import "./styles.css"; import Rotate from './components/Rotate' import RotateYellow from './components/RotateYellow' import yellowFlower from './images/yellowFlower.png' export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <div className="container"> <span><p> hello </p> <Rotate /> </span> <p> 2 </p> <p> 3 </p> </div> <span>Start editing to see some! </span> <RotateYellow src={yellowFlower}/> </div> ); }

Intenté crear una función en mi archivo de componente de rotación para tomar cualquier imagen, pero siempre muestra una imagen rota cuando se procesa.

 import React from 'react'; import { motion } from 'framer-motion'; // import Flower1 from '../images/flowerTrans.png'; // gives image path import styles from './components.module.css' const RotateYellow = (image) => { const [isActive, setIsActive] = React.useState(false); return ( <motion.div onClick={() => setIsActive(!isActive)} animate={{ rotate: isActive ? 90 : 0, }} > <img src={image} className={styles.flower} alt="this is a flower" /> </motion.div> ); }; export default RotateYellow;

Gracias por tu ayuda