Konva React 图像未显示

Question

我有一个非常简单的 Konva-react 应用程序（我已将其从文档中取出）但它不起作用（不显示图像）显示两个警告：

1. 警告： <Image />使用了不正确的大小写。 对 React 组件使用 PascalCase，对 HTML 元素使用小写。
2. 警告：标签<Image>在此浏览器中无法识别。 如果您打算渲染一个 React 组件，请以大写字母开头。 我的 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} />;
}

我的应用组件：

import Canvas from './canvas';

function App() {
  return (
    <div className="App">
      <h2>Conva App</h2>
      <Canvas />
    </div>
  );
}

export default App;

我该如何解决？

Answer 1

您不能简单地在任何地方渲染 Konva 组件。 您需要先创建<Stage>和<Layer>组件，然后才添加您的组件：

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;

您可以查看此沙箱以获取工作示例。