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

【问题标题】：Trying to render a new instance in ReactJS尝试在 ReactJS 中渲染一个新实例
【发布时间】：2017-07-14 21:02:33
【问题描述】：

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

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

然后在主 App 构造函数中执行以下操作：

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。

感谢到目前为止的帮助。

【问题讨论】：

这样做的主要目的是什么？你实际上想要做什么 - 渲染一个数组？
在真正的应用程序中，它是一个有很多状态的游戏类。所以现在我可以渲染一次，但玩家应该能够/启动尽可能多的游戏桌。在我的示例中，我使用 NEW 关键字，因为我习惯于这种创建新实例的方式，但如果有任何其他方式来完成同样的事情，那很好。我只需要多个游戏表。
这太命令式了。 React 的要点之一是声明性。尝试用一些业务逻辑拆分 UI 组件和组件。如果您能获得有关您的任务的更多信息，我会尽力帮助您。

标签： reactjs render instances

【解决方案1】：

你不需要手动实例化 react 组件，使用 JSX 或 createElement。比如

通过 JSX

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

通过React.createElement

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

【讨论】：

感谢您的回答；我尝试了 JSX 版本，它可以工作，太棒了！但还剩下一件事我需要提供论据（我更新帖子以说明我的意思）
嘿，初始化的时候把参数传到这里 var myTinyObject = ;
非常感谢，您的解决方案有效。惊人的！我向所有滥用 ReactJS 的人道歉。

【解决方案2】：

我肯定会查看一些教程以及 React 如何在基本级别上工作。由于渲染函数返回 jsx，因此您不会真正像通常在 javascript 中那样调用您的 react 组件。

从根本上说，React 就是所谓的单页应用程序。这意味着您的浏览器将加载一个带有 div 的 html 文件。现在 div 将成为 React 通过使用 Javascript 更改内容来发挥其魔力的地方。

我最容易把 React 想象成一棵树。您创建这些组件放置在 DOM 或 HTML 中，React 将向下添加和删除它们。例如，看看这张推特图片。

所以首先要把 Feed 组件放到 DOM 上。然后 Feed 组件将呈现 Tweet 组件。所以你可以看到渲染是在一个方向上进行的，向下。

现在，您可以看到您的渲染方法没有返回 javascript。它返回的东西看起来像 HTML，但我们称之为 JSX。这意味着我们想用我们的 react 类来渲染它。

如果我们有一个子组件：

class Child extends React.Component {
  render() {
    return <h1>Hello, I am inside the parent component</h1>;
  }
}

我们可以这样调用渲染方法：

class Parent extends React.Component {
  render() {

    <Child />  //This is how I use the Child class
  }
}

现在，react 如此高效的原因是，除非我们做以下两件事中的一件，否则无法重新渲染孩子：

它是一个有状态的组件，我们称之为setState()方法
我们将新的 props 从父组件传递给子组件

You can read about it here

现在让 React 再次调用该渲染函数的唯一方法是做这两件事。

【讨论】：