Javascript ReactDOM.render不呈现任何内容

在我的主文件中，我有以下代码

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

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

从“./components/phone.js”导入phoneReactElement；
ReactDOM.render（，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;

import React，{Component}来自'React'；
类TestComponent扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
它起作用了
);
}
}
导出默认测试组件；

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

需要：

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

并提出：

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

ReactDOM.render（，document.getElementById（'phoneComponentTester'）；

JSX将小写标记视为常规HTML标记。您应该将

phoneReactElement

重命名为

phoneReactElement

或其他以大写字母开头的名称

---

有关更多信息，请参阅。

这对我来说很有用：您能仔细检查一下您是否正在导入正确的

phone.js

？感谢您将其放在一起，看起来一个区别可能是我正在导出组件（我想我这样做是正确的）。我确认phone.js是正确的。我在下面回答了这个问题，但刚刚注意到这可能是我在一个新项目中尝试了你的代码的副本，第一个问题是你的

组件
文件夹似乎不在
src
文件夹内，而是在它旁边。这是不允许的。我把它移到了里面，把路径从
。
改为
，我得到了一个空白页面和一个空的
phonereactelement
元素。然后我将
index.js
中的
phoneReactElement
更改为
phoneReactElement
，并预设为“它起作用了”。我的建议是使用
create react app
。非常感谢您的回复，但我尝试了您的修复，似乎没有任何影响。我认为，因为它是默认的导出，所以我给它取什么名字并不重要？你说得对，但一致性很重要，你不应该用小写字母check@djfdev answer开始你的组件。我同意，它应该是大写的，我只希望它能显示出来。根据您的示例，我的代码似乎没有问题。请尝试将
div
标记包装在另一个div中感谢您的帮助Amr！谢谢你的回复，但我可以看到它被渲染了，如果你看我附上的截图，它似乎表明了这一点。我将其重命名为
PhoneReactElement
，但它似乎不起作用。在我提供的链接中，它似乎工作正常。。。我还确认，将其更改为您的版本将呈现一个名为phonereactelement的空的无效HTML元素
ReactDOM.render(<TestComponent />, document.getElementById('phoneComponentTester'));