React: Почему этот компонент React не отображает?

Question

Я пишу настольное приложение на React с использованием Electron и Meteor. js

У меня есть следующий класс компонентов 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?

Answer 1

измените это:

export const MemMap = new MemoryMap();

на:

export const MemMap = MemoryMap;

Так как вы должны экспортировать определение компонента, а не создавать его экземпляр и экспортировать его. (поэтому obj.render() работает, а <obj/> - нет.)