能否用new关键字创建React组件实例并在render()方法中使用？

问题描述 #

我想了解是否可以直接在代码中使用new关键字创建React组件实例，而非使用类HTML的JSX语法。我使用类组件语法，希望知道是否可行及实现方法。

示例：var comp1 = new MyComponent({ title: "test 1" });
对比：<MyComponent title="test1" />

示例代码 #

//MyComponent
import { Component } from "react";

export class MyComponent extends Component<any, {title: string}> {
  render() {
    return <div>{this.props.title}</div>
  }
}

//App
import { Component, ReactElement, ReactNode } from "react";
import { MyComponent } from "./mycomponent";
import "./styles.css";

export default class App extends Component {
  renderComponents = () => {
    // 这是我想要的写法，但无法运行
    // var nodes: MyComponent[] = [];
    // var comp1 = new MyComponent({ title: "test 1" });
    // var comp2 = new MyComponent({ title: "test 2" });
    // nodes.push(comp1);
    // nodes.push(comp2);

    // 以下写法可行
    var nodes:ReactElement[] = [];

    nodes.push(<MyComponent title="test1" />);
    nodes.push(<MyComponent title="test2" />);

    return nodes;
  };

  render() {
    return <div className="App">{this.renderComponents()}</div>;
  }
}

补充说明 #

• 刚接触React和Typescript，已有近10年未写JavaScript
• 想用new关键字创建组件实例纯属个人偏好，习惯这种写法，且认为在组合/串联多个元素时代码更简洁
• 仍在学习组件、元素等概念，不太清楚为何不能返回MyComponent数组，而ReactElement（或ReactNode）可以

可行解决方案 #

以下是经过验证的可行代码：

//mycomponent.tsx
import React from "react";
import { Component } from "react";

export class MyComponent extends Component<any, { title: string }> {
  render() {
    return <div>{this.props.title}</div>;
  }
}

//App.tsx
import React from "react";
import { Component, ReactElement } from "react";
import { MyComponent } from "./mycomponent";

export default class App extends Component {
  renderElements = () => {
    var elements: ReactElement[] = [];
    var element1 = React.createElement(MyComponent, { title: "Test1" }, null);
    var element2 = React.createElement(MyComponent, { title: "Test2" }, null);
    elements.push(element1);
    elements.push(element2);
    return elements;
  };

  render() {
    return <div className="App">{this.renderElements()}</div>;
  }
}

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