如何在 React 上正确使用带有样式组件画布的 TypeScript 类型

Question

我正在使用 TypeScript 在 Gatsby 上创建一个 React 组件，并以这种方式定义了一个画布样式组件：

const Background = styled.canvas`
  position: fixed;
  width: 100%;
  height: 100%;
`;

为了使用它，我以这种方式为其分配类型：

const canvas: HTMLCanvasElement = Background,
  context = Background.getContext('2d');

但我在画布类型中遇到此错误：

Type 'String & StyledComponentBase<"canvas", any, {}, never> & NonReactStatics<never, {}>' is missing the following properties from type 'HTMLCanvasElement': height, width, getContext, toBlob, and 238 more.

.getContext() 方法也出现错误：

This expression is not callable.
Type 'never' has no call signatures.

我一直在寻找解决方案，但找不到适合此特定问题的解决方案。 有人可以向我解释一下在 TypeScript 中使用 Styled Component 画布的最佳方式吗？

Answer 1

Background 是 React.Component（即创建虚拟元素的函数）而不是 HTMLCanvasElement。不仅需要调用该函数，它甚至可以远程返回任何东西，例如HTMLCanvasElement，而且您还需要访问底层 DOM 元素才能使其工作。不过，我确实有一个建议，您可以尝试一下。

import { useRef, useEffect } from 'react';

const Background = styled.canvas`
  position: fixed;
  width: 100%;
  height: 100%;
`;

const ComponentUsingTheCanvas = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    const context = canvasRef.current.getContext('2d');
    // Do stuff with your canvas context here
  });
  return (
    <Background ref={canvasRef} />
  );
}

请注意，我没有输入任何内容，因为 TypeScript 大部分时间都可以自动完成。

顺便说一句，既然可以内联样式，为什么还要使用样式化组件呢？ styled-components 只有在你 do something with the props 时才真正有用。

Answer 2

@101arrowz 的答案几乎是正确的，但上下文有问题导致我出现此错误。

Object is possibly 'null'.

但它帮助我找到了一种内联样式的不同方法并以这种方式解决问题：

const Component: React.FC = () => {
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const [context, setContext] = React.useState<CanvasRenderingContext2D | null>(
    null
  );

  React.useEffect(() => {
    if (canvasRef.current) {
      const renderCtx = canvasRef.current.getContext('2d');

      if (renderCtx) {
        setContext(renderCtx);
      }
    }
  }, [context]);

  return (
    <div>
      <canvas
        id="canvas"
        ref={canvasRef}
        style={{
          position: 'fixed',
          width: '100%',
          height: '100%'
        }}
      ></canvas>
    </div>
  );