Javascript 如何修复React中的不变冲突？

本质上，我得到了一个不变的冲突错误：

React.createElement:类型无效--应为字符串（对于内置组件）或类/函数（对于复合组件），但Get:未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

我所做的是进入

index.js

文件并通过我的

侧栏组件

。当我这样做时，侧边栏会在屏幕上弹出，而无需单击

切换按钮

，因此我知道它可以工作。但是，当我通过

App.js

类组件传递它时，我得到了这些错误

App.js文件

import React from 'react';
import { BrowserRouter as Switch, Route } from 'react-router-dom';
import './App.css';

import ResumePage from './pages/resume/resume-page.component';
import NavBar from './components/nav-bar/nav-bar.component';
import HomePage from './pages/homepage/homepage.component';
import ProjectsPage from './pages/projects/projects.component';   
import FooterNav from './components/footer/footer.component';
import {SideBar} from './components/sidebar/sidebar.component'; 



class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      sideBarOpen: false
    } 
  }

  sideBarToggleClickHandler = () => {
    this.setState ((prevState) => {
      return {sideBarOpen: !prevState.sideBarOpen};
    })
  } 

  render() {
    let SideBar; 
    if (this.state.sideBarOpen) {
      SideBar = <SideBar />; // passing in the SideBar component here 
    }
    return (
      <div className="App" style={{height: '100%'}}>
        <Switch>
          <NavBar sideBarClickHandler={this.sideBarToggleClickHandler} />
          {SideBar}
          <Route exact path='/' component={HomePage} />
          <Route path='/resume' component={ResumePage} />
          <Route path='/projects' component={ProjectsPage} />
          <FooterNav />
        </Switch>
      </div>
    );
  }
}

export default App;

从“React”导入React；
从“react router dom”导入{BrowserRouter as Switch，Route}；
导入“/App.css”；
从“./pages/resume/resume page.component”导入ResumePage；
从“./components/nav bar/nav bar.component”导入导航栏；
从“./pages/HomePage/HomePage.component”导入主页；
从“./pages/projects/projects.component”导入项目页面；
从“./components/footer/footer.component”导入页脚导航；
从“./components/SideBar/SideBar.component”导入{SideBar}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
边栏栏：错
} 
}
sideBarToggleClickHandler=（）=>{
this.setState（（prevState）=>{
返回{sideBarOpen:！prevState.sideBarOpen}；
})
} 
render（）{
让边栏；
if（this.state.sideBarOpen）{
侧边栏=；//在此处传入侧边栏组件
}
返回(
{侧边栏}
);
}
}
导出默认应用程序；

功能切换按钮组件

import React from 'react'; 

import './toggleButton.styles.scss';

const ToggleButton = props => (
   <button className='toggle-button' onClick={props.click}>
       <div className='toggle-button_line' />
       <div className='toggle-button_line' />
       <div className='toggle-button_line' />
   </button>
); 

export default ToggleButton; 

从“React”导入React；
导入“./toggleButton.styles.scss”；
const-ToggleButton=props=>(
); 
导出默认切换按钮；

---

当我单击切换按钮时，预期的结果将是侧栏弹出。

组件必须返回
jsx
或
null
，您返回的是
未定义的
。初始化变量

let SideBar = null

您还可以使用
三元运算符
有条件地向
常量
断言一个值，如下所示

const Sidebar = this.state.sidebarOpen ? <Sidebar /> : null

或

下面是一个沙箱的工作示例

如果不满足条件，则侧边栏未定义。将其初始化为null。
不需要将组件存储到变量中，只需有条件地呈现组件

{this.state.sideBarOpen && <SideBar />}

{this.state.sideBarOpen&&}

谢谢，我要试试这个！所以我两个都做了，运气都不好。当我设置
SideBar=null
时，它返回了相同的不变违例错误，除了它告诉我它是null，而不是undefined。第二，三元运算符创建了一个新的
ReferenceError：在初始化之前无法访问侧栏。换成
让内容
或其他方式，你就可以出发了！即使有一节被注释掉了？我注释掉了我以前的
If语句
，并将其替换为
三元运算符语句
。另外，我将三元运算符语句放在
呈现方法
中。位置正确吗？不客气！很乐意帮忙。欢迎来到stackoverflow
let SideBarComp = null 

{this.state.sideBarOpen && <SideBar />}