reactjs - 尝试在 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};
    });  
}

我从应用程序渲染函数中调用它，如下所示:

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);