javascript - ReactDOM.render 不渲染任何东西

Question

在我的主文件中我有这段代码

import phoneReactElement from "../components/phone.js";

ReactDOM.render(<phoneReactElement />, document.getElementById('phoneComponentTester'));

"../components/phone.js"看起来像这样:

import React, { Component } from 'react';

class TestComponent extends Component {

    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>IT WORKED</div>
        );
    }

}
export default TestComponent;

它似乎工作正常，因为控制台中没有错误，我可以在 google chrome 工具中看到该元素，但它似乎是空的。它没有显示“IT WORKED”，我做错了什么？

Answer 1

import phoneReactElement from "../components/phone.js"; 

需要:

import TestComponent from "../components/phone.js";

并渲染它:

ReactDOM.render(<TestComponent />, document.getElementById('phoneComponentTester'));