javascript - React 渲染元素无效，而导入和导出似乎没问题

Question

进出口App似乎没问题。该错误必须是由于名称混合造成的。这是我的第一个反应应用程序。我搜索了各种 StackOverflow 帖子，但都出现了同样的错误，但我无法从中提取有用的见解。所以，请详细一点。

错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查App.

索引.js：

import App from './App';

ReactDOM.render(<App /> , document.getElementById('root'));

应用程序.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 App = () => {
    return (
        <div className="app__wrapper">
            <Chat client={client} theme="team light">
                <ChannelListContainer 
                
                />
                <ChannelContainer

                />
            </Chat>
        </div>
    );
}

export default App;

./components 中的 index.js：

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

标签： javascriptreactjsfrontend

Answer 1

因为你正在使用：

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

您需要ChannelContainer从以下位置导出./ChannelContainer：

const ChannelListContainer = () => {
  return <>ChannelListContainer</>;
};
export default ChannelListContainer;

ChannelListContainer并从以下位置导出./ChannelListContainer：

const ChannelContainer = () => {
  return <>ChannelContainer</>;
};
export default ChannelContainer;

这是基于您的结构的示例：