使用 React.createElement 时对象可能未定义

Question

这是我的球：

import CSS from "csstype";

const circleAroundNumber: CSS.Properties = {
  borderRadius: "50%",
  width: "70px",
  height: "70px",
  padding: "8px",
  position: "absolute",

  borderBlockWidth: "2px",
  borderBlockColor: "black",
  textAlign: "center",

  fontSize: "32px",
  fontFamily: "Arial, sans-serif",
};

interface Props {
  children: string;
  positionx: string;
  positiony: string;
  ballColor: string;
}

function Ball({ children, positionx, positiony, ballColor }: Props) {
  const combinedStyles: CSS.Properties = {
    ...circleAroundNumber,
    background: ballColor,
    left: positionx,
    top: positiony,
  };
  return <div style={combinedStyles}>{children}</div>;
}

export default Ball;

这是我的 InsertionSortView：

import React from "react";
import ReactDOM from "react-dom";

import Ball from "../components/Ball";

interface viewProps {
  balls: (typeof Ball)[];
}

interface swapProps {
  ball1: typeof Ball;
  ball2: typeof Ball;
}

const swap = ({ ball1, ball2 }: swapProps): [typeof Ball, typeof Ball] => {
  //want to get position of ball1 and ball2
  let ball1positionx: number = 30;
  let ball1positiony: number = 100;
  let ball2positionx: number = 90;
  let ball2positiony: number = 100;
  let middle: number = (ball1positionx + ball2positionx) / 2;
  const maxHeight: number = 20;
  while (ball1positionx === 90 && ball1positiony === 100) {
    if (ball1positionx < middle) {
      ball1positionx += 3;
      ball1positiony -= 8;
      ball2positionx -= 3;
      ball1positiony -= 8;
    } else if (ball1positionx >= middle) {
      ball1positionx += 3;
      ball1positiony += 8;
      ball2positionx -= 3;
      ball1positiony += 8;
    }
    //render new balls
    React.createElement(Ball, 
      this.props.positionx: ball1positionx.toString(), 
      this.props.positiony: ball1positiony.toString(), 
      this.props.ballColor: "red",
      "7");
  }
  return [ball1, ball2];
};

function InsertionSortView({ balls }: viewProps) {}

export default InsertionSortView;

出于某种原因，在 InsertionSortView 中的交换函数中，当我尝试为

React.newElement

调用

Ball

并尝试传入 Ball 的 props（例如，

this.props.positionx: ball1positionx.toString(),

）时，它会抛出两个错误：第一个是对于

this

，它显示

Object is possible undefined

；它抛出的第二个错误是它希望将冒号更改为逗号。有谁知道为什么吗？

Answer 1

React.createElement

将 Elrmrnt

props

作为其第二个参数，其形式为 object:

React.createElement(Ball, { // props object
  positionx: ball1positionx.toString(), 
  positiony: ball1positiony.toString(), 
  ballColor: "red",
},
// children
"7");