Tengo una aplicación Konva-react muy simple (la saqué directamente de los documentos) y no funciona (no muestra la imagen) y muestra dos advertencias:
<Image /> está usando mayúsculas y minúsculas incorrectas. Use PascalCase para componentes React o minúsculas para elementos HTML.<Image> no se reconoce en este navegador. Si pretendía renderizar un componente de React, comience su nombre con una letra mayúscula. Mi componente Canvas: import { Image } from 'react-konva'; import useImage from 'use-image'; const url = 'https://konvajs.github.io/assets/yoda.jpg'; export default function Canvas() { const [image] = useImage(url); return <Image image={image} />; }Mi componente de aplicación:
import Canvas from './canvas'; function App() { return ( <div className="App"> <h2>Conva App</h2> <Canvas /> </div> ); } export default App;¿Cómo puedo arreglarlo?
No puede simplemente renderizar los componentes de Konva en cualquier lugar. Primero debe crear el componente <Stage> y <Layer> , y solo luego agregar su componente:
import { Stage, Layer } from "react-konva"; import Canvas from "./canvas"; function App() { return ( <div className="App"> <h2>Conva App</h2> <Stage width={window.innerWidth} height={window.innerHeight}> <Layer> <Canvas /> </Layer> </Stage> </div> ); } export default App;Puede consultar este sandbox para ver un ejemplo de trabajo.