尝试在 ReactJS 中渲染一个新实例

Question

作为示例（真实尝试过的代码），我有一个组件，我想启动一个新实例进行渲染。

import React, { Component } from 'react';

export default class TinyObject extends Component {    
    constructor(props) {
        super(props);
        console.log("TinyObject constructor");
    }

    render() {    
        console.log("TinyObject render");
        return (
            <div>HEY THIS IS MY TINY OBJECT</div>
        );
    }
}

然后在主应用程序构造函数中我执行以下操作：

var myTinyObject = new TinyObject();
var myArray = [];
myArray.push(myTinyObject);
this.state = {testing: myArray};

然后创建了一个函数来渲染它：

renderTest()
{
    const {testing} = this.state;

    const result = testing.map((test, i) => {
        console.log(test);
        return {test};
    });  
}

我从 App 渲染函数中调用它，如下所示：

render() {
     const { gametables, tableActive } = this.state;

    console.log("render");
    return <div><div>{this.renderTest()}</div></div>;
}

运行起来，没有错误。我看到以下控制台日志：

console.log("TinyObject constructor");
console.log(test);

但我没有看到 TinyObject 渲染的控制台日志，也没有看到渲染输出。

感谢 lustoykov 的回答，我得到了进一步的了解

JSX: var myTinyObject = <TinyObject />;

作品！

但在真正的应用程序中，我添加了更多内容，但不知道如何在这里执行此操作。

return <GameTable key={'gt'+index} data={table} settings={this.settingsData} sendTableNetworkMessage={this.sendTableNetworkMessage} />          

这就是我渲染的方式；我需要更多 GameTable 实例，现在的问题是；如何将数据和设置等参数添加到 myTinyObject.

感谢您迄今为止的帮助。

Answer 1

您不需要手动实例化 React 组件，而是使用 JSX 或 createElement。例如

通过 JSX

var myTinyObject = <TinyObject prop1={prop1} prop2={prop2} />;

通过React.createElement

var myTinyObject = React.createElement(TinyObject, { prop1, prop2 }, null);