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

然后在主 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。

感谢您到目前为止的帮助。

Answer 1

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

通过 JSX

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

通过React.createElement

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

Answer 2

我肯定会查看一些教程以及 React 在基础级别上的工作原理。你不会真的像在 javascript 中那样调用你的反应组件，因为渲染函数 returns jsx.

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

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

所以首先要将 Feed 组件放在 DOM 上。然后 Feed 组件将呈现 Tweet 组件。因此，正如您所看到的，渲染是朝一个方向进行的，向下。

现在，如您所见，您的渲染方法没有返回 javascript。它返回的东西看起来像 HTML，但我们称之为 JSX。这意味着我们想用我们的反应类.

稍微不同地渲染它

如果我们有一个子组件：

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 再次调用渲染函数的唯一方法就是做这两件事。

尝试在 ReactJS 中呈现一个新实例

Trying to render a new instance in ReactJS

reactjs

render

instances