我的react应用程序在本地主机上显示空白页面

Question

在我的聊天应用程序文件夹，我有一个客户端my-app和一个服务器文件夹。在客户机文件夹中，我有其他文件夹，称为node modules、public和src。我也有一个。gitignore，包锁。json,包。Json和readme.md。在src中，我有一个组件文件夹，一个App.jsx和一个index.js。在组件文件夹中，我有一个ChannelContainer。jsx，一个ChannelListContainer。Jsx和index.js.

这是我的App.jsx

import React from 'react';
import { StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react';
import Cookies from 'universal-cookie';
import { ChannelListContainer, ChannelContainer } from './components';
const apiKey = '98dzy6uqhm8m';
const client = StreamChat.getInstance(apiKey);
console.log("hi")
const App = () => {
return (
<div className="app__wrapper">
<Chat client={client} theme="team light">
<ChannelListContainer

/>
<ChannelContainer
/>
</Chat>

</div>
);
}
export default App;

这是src文件夹中的index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

这是组件文件夹中的index.js:

export { default as ChannelContainer } from './ChannelContainer';
export { default as ChannelListContainer } from './ChannelListContainer';

这是ChannelListContainer.jsx:

import React from 'react';
console.log("hi")
const ChannelListContainer = () => {
return (
<div>
ChannelListContainer
</div>
);
}
export default ChannelListContainer;

这是ChannelContainer:

import React from 'react';
console.log("hi")
const ChannelContainer = () => {
return (
<div>
ChannelContainer
</div>
);
}
export default ChannelContainer;

我用谷歌搜索了好几个小时。我在我的包里添加了一个"主页";"/"。Json在"private";: true"one_answers"dependencies";:{"之间，但这没有帮助。我cd到client文件夹，然后是my-app文件夹。然后我执行npm start，但是create-react-app页面是空白的，尽管终端显示编译成功。我甚至把console.log("hi")放在任何地方，但屏幕上什么也没有显示。

编辑:我将ID固定为ID，但页面仍然是空白

Answer 1

你在index.js中打错字了

用document.getElementById()代替document.getElementByID()

控制台的消息应该显示一个错误