React：为什么这个 React 组件不渲染？

Question

I'm in the process of writing a desktop application in React using Electron and Meteor.js

I have the following React Component class:

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

I attempt to render this class in Main.jsx as such:

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

When called this way, the program crashes on this line. The Desktop.send function is never called.

If I re-write MemoryMap as such, where the render function becomes a class method:

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

And the main.jsx file is re-written to call that method:

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

The element renders just fine.

Why is this? Why can't I use the HTML tag formatting, as shown in React's tutorials?

Answer 1

change this:

export const MemMap = new MemoryMap();

to:

export const MemMap = MemoryMap;

Since you should export the component defination, not creating an instance of it and exporting it. (that's why obj.render() works but <obj/> doesn't.)