React.createElement传参报错：Object可能未定义等问题求助

问题场景 #

在InsertionSortView组件的swap函数里调用React.createElement创建Ball组件时，出现两个错误：

1. 访问this提示“Object is possibly undefined”
2. 语法检查要求将props中的冒号改为逗号

代码回顾 #

Ball组件代码 #

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;

错误原因分析 #

1. this访问提示“Object is possibly undefined”的原因 #

• swap是独立的箭头函数，不属于类组件方法，也没有绑定任何上下文，因此this在这里没有有效指向，默认是undefined。
• 且此处根本不需要this.props，要传递的positionx、positiony等参数都是当前函数内定义的变量，直接使用即可。

2. props中冒号要改为逗号的原因 #

• React.createElement的第二个参数是props对象，对象内部的键值对用冒号分隔，而不同键值对之间必须用逗号分隔。你错误地将this.props.xxx作为键名，正确写法是直接定义props的键（如positionx）和对应值，再用逗号分隔每个键值对。

修正后的swap函数片段 #

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条件：初始值不满足原条件，循环无法执行
  while (ball1positionx !== 90 || ball1positiony !== 100) {
    if (ball1positionx < middle) {
      ball1positionx += 3;
      ball1positiony -= 8;
      ball2positionx -= 3;
      ball2positiony -= 8; // 修正笔误：之前错误修改了ball1positiony两次
    } else if (ball1positionx >= middle) {
      ball1positionx += 3;
      ball1positiony += 8;
      ball2positionx -= 3;
      ball2positiony += 8; // 同样修正笔误
    }
    // 修正后的React.createElement调用
    const newBall = React.createElement(Ball, 
      {
        positionx: ball1positionx.toString(), 
        positiony: ball1positiony.toString(), 
        ballColor: "red"
      },
      "7"
    );
    // 注意：创建组件后需将其加入渲染逻辑（比如存入状态），否则不会在页面显示
  }
  return [ball1, ball2];
};

额外提示：原代码的while循环条件初始就不成立（ball1positionx初始为30，不等于90），循环根本不会执行，这个逻辑也需要修正。

内容的提问来源于stack exchange，提问作者user23088643