React：为啥这个 React 组件不渲染？

Posted 2023-03-07

【中文标题】React：为啥这个 React 组件不渲染？

【英文标题】：React: Why won't this React Component render?React：为什么这个 React 组件不渲染？

【发布时间】：2020-08-05 17:59:37

【问题描述】：

我正在使用 Electron 和 Meteor.js 在 React 中编写桌面应用程序

我有以下 React 组件类：

import React from "react"

export class MemoryMap extends React.Component
    constructor(props)
        super(props);
        this.state = 
            memory : [],
            mem_max : 0xFFFF,
        

        this.readByte = function(byte)
            return this.state.memory[byte];
        ;

        this.writeByte = function(mem_addr, byte)
            if(mem_addr >= 0 && mem_addr < this.state.mem_max) 
                this.state.memory[mem_addr] = byte;
            
        ;

        for(let i = 0; i < 10000; i++)
            this.state.memory[i] = 0x0000;
        



    

    render()
        return(
            <div>
                <h1>this.state.memory[0x0000]</h1>
            </div>
        );
    


export const MemMap = new MemoryMap();

我尝试在 Main.jsx 中渲染这个类：

import React from 'react';
import  Meteor  from 'meteor/meteor';
import  render  from 'react-dom';
import MemMap from "./CPU_Elements/MemoryMap";


Meteor.startup(() => 

  render(<MemMap/>, document.getElementById("react-target"));
  Desktop.send("desktop", "init");
);

当以这种方式调用时，程序会在这一行崩溃。 Desktop.send 函数永远不会被调用。

如果我这样重写 MemoryMap，渲染函数变成类方法：

import React from "react"

export class MemoryMap extends React.Component
    constructor(props)
        super(props);
        this.state = 
            memory : [],
            mem_max : 0xFFFF,
        

        this.readByte = function(byte)
            return this.state.memory[byte];
        ;

        this.writeByte = function(mem_addr, byte)
            if(mem_addr >= 0 && mem_addr < this.state.mem_max) 
                this.state.memory[mem_addr] = byte;
            
        ;

        for(let i = 0; i < 10000; i++)
            this.state.memory[i] = 0x0000;
        

        this.render = function()
            return(
                <div>
                    <h1>this.state.memory[0x0000]</h1>
                </div>
            );
        

    




export const MemMap = new MemoryMap();

并重写 main.jsx 文件以调用该方法：

import React from 'react';
import  Meteor  from 'meteor/meteor';
import  render  from 'react-dom';
import MemMap from "./CPU_Elements/MemoryMap";


Meteor.startup(() => 

  render(MemMap.render(), document.getElementById("react-target"));
  Desktop.send("desktop", "init");
);

元素渲染得很好。

这是为什么？为什么我不能使用 html 标签格式，如 React 的教程中所示？

【参考方案1】：

改变这个：

export const MemMap = new MemoryMap();

到：

export const MemMap = MemoryMap;

因为您应该导出组件定义，而不是创建它的实例并导出它。 （这就是为什么obj.render() 有效，而<obj/> 无效。）

【讨论】：

这解决了我的问题。我只是有一个快速的后续问题：导出定义是否调用构造函数？就像，这现在是否充当我可以全局初始化和使用的类的静态版本？

@TimFinnegan 不，构造函数不只是通过定义它来调用。一个类就像一个函数定义。当你定义它时，它不会被调用。当你创建它的一个实例时，它会调用构造函数和它......是的，正如你所说，它就像一个定义，你可以从它全局创建对象。