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如何在基本级别工作。因为渲染函数返回jsx，所以你不会像通常在javascript中那样调用反应组件。

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

我最容易将React视为一棵树。您可以创建放置在DOM或HTML中的组件，而React会向下添加和删除它们。例如，看一下twitter的这张图片。

首先，Feed组件将被放在DOM上。然后Feed组件将呈现Tweet组件。因此，您可以看到渲染向一个方向向下移动。

现在，您可以看到您的渲染方法没有返回javascript。它返回的内容看起来像HTML，但我们称之为 JSX 。这意味着我们希望使用我们的反应类来呈现它。

如果我们有子组件：

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

我们可以像这样调用render方法：

class Parent extends React.Component {
  render() {

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

现在反应如此高效的原因是除非我们做两件事之一，否则不能重新渲染孩子：

它是一个具有状态的组件，我们调用方法setState（）
我们将新道具传递给父组件

You can read about it here

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

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

2 个答案: