babylonjs反应打字稿问题/建议

Question

请指导我以下内容：我正在尝试使用hooks（使用CRA模板创建）将babylonjs-react类组件转换为一个组件。我要指向的页面是：-https://doc.babylonjs.com/resources/babylonjs_and_reactjs

1）第一个问题：

该行：

export default class Scene extends React.Component<SceneProps & React.HTMLAttributes<HTMLCanvasElement>, {}> {

  private scene: BABYLON.Scene;
  private engine: BABYLON.Engine;
  private canvas: HTMLCanvasElement;

---

什么是等效的React功能组件？ （不知道如何处理尖括号中的类型：-

const Scene : React.FC <> = () => { 

---

2）我应该将私有变量设为useState吗？

查看链接https://doc.babylonjs.com/resources/babylonjs_and_reactjs；我们能否请您告知打字稿等效代码是什么样子；我用CRA模板尝试过；无法获得适当的类型通过

Answer 1

1. 第一个问题

const Scene: React.FC<
  SceneProps & 
  React.HTMLAttributes<HTMLCanvasElement>
> = props => {

  // Don't worry, they are private (equivalent)
  // i.e. their scope is within this function
  // Fun Fact: JavaScript doesn't have `private`
  // and typescript can enforce it only within it's compiler  
  // Because, JS was built as a functional programming language

  // let scene: BABYLON.Scene;
  // let engine: BABYLON.Engine;
  // let canvas: HTMLCanvasElement;

  // There's one problem in declaring variables
  // Directly like this,
  // These variables gets created or updated for 
  // Every update i.e. every function call. So, use this

  const scene = React.useRef<BABYLON.Scene>(null);
  const engine: React.useRef<BABYLON.Engine>(null);
  const canvas: React.useRef<HTMLCanvasElement>(null);


  // and access them using .current
  const bar = scene.current.bar;
  // Or reassign the same way
  scene.current = foo

1. 第二个问题

  // As I have said in the previous comment,
  // The scope of this variable is within this function
  // So it's equivalent of being private variable
  const [someState, setSomeState] = React.useState<boolean>(false);